From 55f4cf79bc2ecebe654a577c9e9ac03f29f3d143 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Mon, 13 Jan 2025 15:23:33 +0300 Subject: [PATCH 01/11] exit editor mode on page change --- web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts index 1a206a0f82..b380f6e863 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts @@ -136,6 +136,10 @@ export default ( onStoryPageChange?.(newPage.id); setCurrentPageId(newPage.id); setLayerOverride(undefined); + if (disableSelection) { + setDisableSelection(false); + setSelectedBlockId(undefined); + } const container = document.getElementById(STORY_PANEL_CONTENT_ELEMENT_ID); if (!pageId) { @@ -163,6 +167,7 @@ export default ( currentPageId, selectedStory?.pages, onStoryPageChange, + disableSelection, handlePageTime, visualizer ] From dc36ab04a39c0bb579c549773adb3b4f4ebf1dbd Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Tue, 14 Jan 2025 12:22:44 +0300 Subject: [PATCH 02/11] adjust page-gap height --- .../features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts index 90003588ff..93d5fd8eb4 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts @@ -58,7 +58,7 @@ export default ({ const pageWrapperElement = document.getElementById( STORY_PANEL_CONTENT_ELEMENT_ID ); - if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block + if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 90); // 90px is the height of the page title block }, [setPageGap]); useEffect(() => { From 53498eae5708bca832577ae3d7642504cf3bcde2 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Wed, 15 Jan 2025 12:05:42 +0300 Subject: [PATCH 03/11] add default page gap --- .../Visualizer/Crust/StoryPanel/PanelContent/hooks.ts | 2 +- .../beta/features/Visualizer/Crust/StoryPanel/constants.ts | 2 +- web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts | 6 +++++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts index 93d5fd8eb4..90003588ff 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts @@ -58,7 +58,7 @@ export default ({ const pageWrapperElement = document.getElementById( STORY_PANEL_CONTENT_ELEMENT_ID ); - if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 90); // 90px is the height of the page title block + if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block }, [setPageGap]); useEffect(() => { diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts index 10f04a4186..8cc972310e 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts @@ -3,7 +3,7 @@ import { Spacing } from "@reearth/core"; // Story Panel export const STORY_PANEL_WIDTH = 442; export const STORY_PANEL_CONTENT_ELEMENT_ID = "story-page-content"; - +export const DEFULT_STORY_PAGE_GAP = 320 // Story Page export const DEFAULT_STORY_PAGE_DURATION = 2; export const DEFAULT_STORY_PAGE_GAP = 20; diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts index b380f6e863..681d87b837 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts @@ -17,6 +17,7 @@ import { MapRef } from "../../Crust/types"; import { DEFAULT_STORY_PAGE_DURATION, + DEFULT_STORY_PAGE_GAP, STORY_PANEL_CONTENT_ELEMENT_ID } from "./constants"; import { formatISO8601 } from "./utils"; @@ -148,7 +149,10 @@ export default ( const element = document.getElementById(`story-page-${newPage.id}`); if (container && element) { isAutoScrolling.current = true; - container.scrollTo({ top: element?.offsetTop, behavior: "smooth" }); + const adjustedOffset = disableSelection + ? element.offsetTop - DEFULT_STORY_PAGE_GAP + : element.offsetTop; + container.scrollTo({ top: adjustedOffset, behavior: "smooth" }); } } From 223947fa7852b7c3e49fa72a0cdad85eeee0532f Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Wed, 15 Jan 2025 12:40:45 +0300 Subject: [PATCH 04/11] revert changes --- .../Visualizer/Crust/StoryPanel/PanelContent/hooks.ts | 2 +- .../beta/features/Visualizer/Crust/StoryPanel/constants.ts | 2 +- web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts | 6 +----- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts index 90003588ff..93d5fd8eb4 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts @@ -58,7 +58,7 @@ export default ({ const pageWrapperElement = document.getElementById( STORY_PANEL_CONTENT_ELEMENT_ID ); - if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block + if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 90); // 90px is the height of the page title block }, [setPageGap]); useEffect(() => { diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts index 8cc972310e..10f04a4186 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts @@ -3,7 +3,7 @@ import { Spacing } from "@reearth/core"; // Story Panel export const STORY_PANEL_WIDTH = 442; export const STORY_PANEL_CONTENT_ELEMENT_ID = "story-page-content"; -export const DEFULT_STORY_PAGE_GAP = 320 + // Story Page export const DEFAULT_STORY_PAGE_DURATION = 2; export const DEFAULT_STORY_PAGE_GAP = 20; diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts index 681d87b837..b380f6e863 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts @@ -17,7 +17,6 @@ import { MapRef } from "../../Crust/types"; import { DEFAULT_STORY_PAGE_DURATION, - DEFULT_STORY_PAGE_GAP, STORY_PANEL_CONTENT_ELEMENT_ID } from "./constants"; import { formatISO8601 } from "./utils"; @@ -149,10 +148,7 @@ export default ( const element = document.getElementById(`story-page-${newPage.id}`); if (container && element) { isAutoScrolling.current = true; - const adjustedOffset = disableSelection - ? element.offsetTop - DEFULT_STORY_PAGE_GAP - : element.offsetTop; - container.scrollTo({ top: adjustedOffset, behavior: "smooth" }); + container.scrollTo({ top: element?.offsetTop, behavior: "smooth" }); } } From 6c855f181cef2c00c71ae84eca4c7c89fe174623 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Wed, 15 Jan 2025 14:26:35 +0300 Subject: [PATCH 05/11] remove page gape --- .../Crust/StoryPanel/PanelContent/hooks.ts | 25 -------- .../Crust/StoryPanel/PanelContent/index.tsx | 57 +++++++++---------- 2 files changed, 28 insertions(+), 54 deletions(-) diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts index 93d5fd8eb4..5bd9627990 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts @@ -1,14 +1,10 @@ import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext"; import { useCallback, - useEffect, - useLayoutEffect, useMemo, useRef, - useState } from "react"; -import { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants"; export type { StoryPage } from "../hooks"; export { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants"; @@ -31,8 +27,6 @@ export default ({ const editModeContext = useEditModeContext(); const scrollTimeoutRef = useRef(); - const [pageGap, setPageGap] = useState(); - const disableSelection = useMemo( () => editModeContext?.disableSelection, [editModeContext?.disableSelection] @@ -54,26 +48,7 @@ export default ({ [onBlockDelete] ); - useLayoutEffect(() => { - const pageWrapperElement = document.getElementById( - STORY_PANEL_CONTENT_ELEMENT_ID - ); - if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 90); // 90px is the height of the page title block - }, [setPageGap]); - - useEffect(() => { - const resizeCallback = () => { - const pageWrapperElement = document.getElementById( - STORY_PANEL_CONTENT_ELEMENT_ID - ); - if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block - }; - window.addEventListener("resize", resizeCallback); - return () => window.removeEventListener("resize", resizeCallback); - }, []); - return { - pageGap, scrollTimeoutRef, disableSelection, handleBlockCreate, diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx index 009562a567..8c6f5ec91a 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx @@ -90,7 +90,6 @@ const StoryContent: FC = ({ renderBlock }) => { const { - pageGap, scrollTimeoutRef, disableSelection, handleBlockCreate, @@ -107,32 +106,31 @@ const StoryContent: FC = ({ isEditable={isEditable && !disableSelection} > {pages?.map((p) => ( - - onPageSelect?.(p.id)} /> - + + + ))} ); @@ -154,6 +152,7 @@ const PagesWrapper = styled("div")<{ msOverflowStyle: "none" })); -const PageGap = styled("div")<{ height?: number }>(({ height }) => ({ - height: height ? `${height}px` : "70vh" +const StoryPageWrapper = styled("div")(() => ({ + height: "100vh" })); + From 4aaf8fd838f604e8894b52f960239be3ccff678f Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Thu, 16 Jan 2025 10:06:13 +0300 Subject: [PATCH 06/11] undo server changes --- server/internal/app/config/config.go | 6 +-- server/internal/app/repo.go | 70 ++++++++++++++-------------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/server/internal/app/config/config.go b/server/internal/app/config/config.go index 7215d00fd2..34b5c35335 100644 --- a/server/internal/app/config/config.go +++ b/server/internal/app/config/config.go @@ -29,9 +29,9 @@ type Config struct { Host_Web string `pp:",omitempty"` Dev bool `pp:",omitempty"` DB string `default:"mongodb://localhost"` - DB_Account string `pp:",omitempty"` + DB_Account string `default:"reearth_account" pp:",omitempty"` DB_Users []appx.NamedURI `pp:",omitempty"` - DB_Vis string `pp:",omitempty"` + DB_Vis string `default:"reearth" pp:",omitempty"` GraphQL GraphQLConfig `pp:",omitempty"` Published PublishedConfig `pp:",omitempty"` GCPProject string `envconfig:"GOOGLE_CLOUD_PROJECT" pp:",omitempty"` @@ -256,4 +256,4 @@ func strPtr(s string) *string { func intPtr(i int) *int { return &i -} +} \ No newline at end of file diff --git a/server/internal/app/repo.go b/server/internal/app/repo.go index 7fa55f2b06..dc56779460 100644 --- a/server/internal/app/repo.go +++ b/server/internal/app/repo.go @@ -1,3 +1,4 @@ + package app import ( @@ -25,31 +26,9 @@ import ( "go.opentelemetry.io/contrib/instrumentation/go.mongodb.org/mongo-driver/mongo/otelmongo" ) -const defaultVisDatabase = "reearth" -const defaultAccountDatabase = "reearth_account" - -func initReposAndGateways(ctx context.Context, conf *config.Config, debug bool) (*repo.Container, *gateway.Container, *accountrepo.Container, *accountgateway.Container) { - gateways := &gateway.Container{} - acGateways := &accountgateway.Container{} - - // Mongo - client, err := mongo.Connect( - ctx, - options.Client(). - ApplyURI(conf.DB). - SetMonitor(otelmongo.NewMonitor()), - ) - if err != nil { - log.Fatalf("mongo error: %+v\n", err) - } - - // for account database +func initAccountDatabase(client *mongo.Client, txAvailable bool, ctx context.Context, conf *config.Config) *accountrepo.Container { accountDatabase := conf.DB_Account - accountRepoCompat := false - if accountDatabase == "" { - accountDatabase = defaultAccountDatabase - accountRepoCompat = true - } + log.Infof("accountDatabase: %s", accountDatabase) accountUsers := make([]accountrepo.User, 0, len(conf.DB_Users)) for _, u := range conf.DB_Users { @@ -60,23 +39,44 @@ func initReposAndGateways(ctx context.Context, conf *config.Config, debug bool) accountUsers = append(accountUsers, accountmongo.NewUserWithHost(mongox.NewClient(accountDatabase, c), u.Name)) } - txAvailable := mongox.IsTransactionAvailable(conf.DB) - - accountRepos, err := accountmongo.New(ctx, client, accountDatabase, txAvailable, accountRepoCompat, accountUsers) + // this flag is for old database structure compatibility + // on this service, it is always false + useLegacyStructure := false + accountRepos, err := accountmongo.New(ctx, client, accountDatabase, txAvailable, useLegacyStructure, accountUsers) if err != nil { - log.Fatalf("Failed to init mongo: %+v\n", err) + log.Fatalf("Failed to init mongo database account: %+v\n", err) } + return accountRepos +} - // for reearth visualizer database +func initVisDatabase(client *mongo.Client, txAvailable bool, accountRepos *accountrepo.Container, ctx context.Context, conf *config.Config) *repo.Container { visDatabase := conf.DB_Vis - if visDatabase == "" { - visDatabase = defaultVisDatabase - } + log.Infof("visDatabase: %s", visDatabase) repos, err := mongorepo.NewWithExtensions(ctx, client.Database(visDatabase), accountRepos, txAvailable, conf.Ext_Plugin) if err != nil { - log.Fatalf("Failed to init mongo: %+v\n", err) + log.Fatalf("Failed to init mongo database visualizer: %+v\n", err) } + return repos +} + +func initReposAndGateways(ctx context.Context, conf *config.Config, debug bool) (*repo.Container, *gateway.Container, *accountrepo.Container, *accountgateway.Container) { + gateways := &gateway.Container{} + acGateways := &accountgateway.Container{} + + // Mongo + client, err := mongo.Connect( + ctx, + options.Client(). + ApplyURI(conf.DB). + SetMonitor(otelmongo.NewMonitor()), + ) + if err != nil { + log.Fatalf("mongo error: %+v\n", err) + } + txAvailable := mongox.IsTransactionAvailable(conf.DB) + accountRepos := initAccountDatabase(client, txAvailable, ctx, conf) + visRepos := initVisDatabase(client, txAvailable, accountRepos, ctx, conf) // File gateways.File = initFile(ctx, conf) @@ -99,11 +99,11 @@ func initReposAndGateways(ctx context.Context, conf *config.Config, debug bool) } // release lock of all scenes - if err := repos.SceneLock.ReleaseAllLock(context.Background()); err != nil { + if err := visRepos.SceneLock.ReleaseAllLock(context.Background()); err != nil { log.Fatalf("repo initialization error: %v", err) } - return repos, gateways, accountRepos, acGateways + return visRepos, gateways, accountRepos, acGateways } func initFile(ctx context.Context, conf *config.Config) (fileRepo gateway.File) { From 54a8095608e02fbef8115382c3bf7c6f92509bb5 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Thu, 16 Jan 2025 10:09:43 +0300 Subject: [PATCH 07/11] undo server changes --- server/internal/app/repo.go | 1 - 1 file changed, 1 deletion(-) diff --git a/server/internal/app/repo.go b/server/internal/app/repo.go index dc56779460..80d9b8567d 100644 --- a/server/internal/app/repo.go +++ b/server/internal/app/repo.go @@ -1,4 +1,3 @@ - package app import ( From 2a3758d37890f04e1f9c2615eb8aba6724b6ac19 Mon Sep 17 00:00:00 2001 From: airslice Date: Thu, 16 Jan 2025 15:23:42 +0800 Subject: [PATCH 08/11] refactor: revert changes on server --- server/internal/app/config/config.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/internal/app/config/config.go b/server/internal/app/config/config.go index 34b5c35335..62ddd9ea0e 100644 --- a/server/internal/app/config/config.go +++ b/server/internal/app/config/config.go @@ -256,4 +256,4 @@ func strPtr(s string) *string { func intPtr(i int) *int { return &i -} \ No newline at end of file +} From 61e419cd0980cb3f126c78a6254b0913ea9409f8 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Thu, 16 Jan 2025 10:25:05 +0300 Subject: [PATCH 09/11] format config file --- server/internal/app/config/config.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/internal/app/config/config.go b/server/internal/app/config/config.go index 34b5c35335..62ddd9ea0e 100644 --- a/server/internal/app/config/config.go +++ b/server/internal/app/config/config.go @@ -256,4 +256,4 @@ func strPtr(s string) *string { func intPtr(i int) *int { return &i -} \ No newline at end of file +} From c735622fe52c7dd1104a74383d3f5fd58b119354 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Mon, 20 Jan 2025 09:10:38 +0300 Subject: [PATCH 10/11] improve height --- .../beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx | 2 +- .../features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx index 2a65e95cf7..60f2b1e4ce 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx @@ -146,7 +146,7 @@ const StoryPanel: FC = ({ }, 100); }); } else { - onCurrentPageChange?.(id, true); + onCurrentPageChange?.(id, false); } } } diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx index 8c6f5ec91a..340b373393 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx @@ -153,6 +153,6 @@ const PagesWrapper = styled("div")<{ })); const StoryPageWrapper = styled("div")(() => ({ - height: "100vh" + minHeight: "92vh" })); From 7464ad3a9d0778b48782ef851a5008fc57d14e0b Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Wed, 22 Jan 2025 15:14:16 +0300 Subject: [PATCH 11/11] reset changes --- .../Crust/StoryPanel/Page/index.tsx | 2 +- .../Crust/StoryPanel/PanelContent/hooks.ts | 25 ++++++++ .../Crust/StoryPanel/PanelContent/index.tsx | 57 ++++++++++--------- .../Visualizer/Crust/StoryPanel/hooks.ts | 8 ++- 4 files changed, 61 insertions(+), 31 deletions(-) diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx index 60f2b1e4ce..2a65e95cf7 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx @@ -146,7 +146,7 @@ const StoryPanel: FC = ({ }, 100); }); } else { - onCurrentPageChange?.(id, false); + onCurrentPageChange?.(id, true); } } } diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts index 5bd9627990..90003588ff 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts @@ -1,10 +1,14 @@ import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext"; import { useCallback, + useEffect, + useLayoutEffect, useMemo, useRef, + useState } from "react"; +import { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants"; export type { StoryPage } from "../hooks"; export { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants"; @@ -27,6 +31,8 @@ export default ({ const editModeContext = useEditModeContext(); const scrollTimeoutRef = useRef(); + const [pageGap, setPageGap] = useState(); + const disableSelection = useMemo( () => editModeContext?.disableSelection, [editModeContext?.disableSelection] @@ -48,7 +54,26 @@ export default ({ [onBlockDelete] ); + useLayoutEffect(() => { + const pageWrapperElement = document.getElementById( + STORY_PANEL_CONTENT_ELEMENT_ID + ); + if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block + }, [setPageGap]); + + useEffect(() => { + const resizeCallback = () => { + const pageWrapperElement = document.getElementById( + STORY_PANEL_CONTENT_ELEMENT_ID + ); + if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block + }; + window.addEventListener("resize", resizeCallback); + return () => window.removeEventListener("resize", resizeCallback); + }, []); + return { + pageGap, scrollTimeoutRef, disableSelection, handleBlockCreate, diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx index 340b373393..70e60619cb 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx @@ -90,6 +90,7 @@ const StoryContent: FC = ({ renderBlock }) => { const { + pageGap, scrollTimeoutRef, disableSelection, handleBlockCreate, @@ -106,31 +107,32 @@ const StoryContent: FC = ({ isEditable={isEditable && !disableSelection} > {pages?.map((p) => ( - - - + + onPageSelect?.(p.id)} /> + ))} ); @@ -152,7 +154,6 @@ const PagesWrapper = styled("div")<{ msOverflowStyle: "none" })); -const StoryPageWrapper = styled("div")(() => ({ - minHeight: "92vh" +const PageGap = styled("div")<{ height?: number }>(({ height }) => ({ + height: height ? `${height}px` : "70vh", })); - diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts index b380f6e863..1bedd95ea8 100644 --- a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts @@ -136,6 +136,7 @@ export default ( onStoryPageChange?.(newPage.id); setCurrentPageId(newPage.id); setLayerOverride(undefined); + if (disableSelection) { setDisableSelection(false); setSelectedBlockId(undefined); @@ -143,12 +144,15 @@ export default ( const container = document.getElementById(STORY_PANEL_CONTENT_ELEMENT_ID); if (!pageId) { - if (container) container.scrollTo(0, 0); // If no pageId, newPage will be the first page and we scroll all the way to the top here + if (container) container.scrollTo(0, 0); } else if (!disableScrollIntoView) { const element = document.getElementById(`story-page-${newPage.id}`); if (container && element) { isAutoScrolling.current = true; - container.scrollTo({ top: element?.offsetTop, behavior: "smooth" }); + container.scrollTo({ + top: element.offsetTop, + behavior: "smooth" + }); } }