From 89eafef8468525808dd3dcd5a9fa06179d60e2f0 Mon Sep 17 00:00:00 2001 From: lby Date: Fri, 21 Jun 2024 09:02:05 +0800 Subject: [PATCH] chore(web): support plugin block in story panel (#1022) --- .../fields/TimelineField/EditPanel/index.tsx | 2 +- .../Editor/Story/PagesPanel/index.tsx | 2 +- .../Editor/Visualizer/convert-story.ts | 6 +- .../beta/features/Editor/Visualizer/index.tsx | 2 +- .../features/Editor/hooks/useStorytelling.ts | 2 +- web/src/beta/features/Published/hooks.ts | 2 +- .../Block/builtin/PropertyList/Content.tsx | 2 +- .../PropertyList/CustomFields/index.tsx | 2 +- .../Visualizer/Crust/Infobox/Block/index.tsx | 2 +- .../Visualizer/Crust/Infobox/index.tsx | 3 +- .../Visualizer/Crust/Plugins/hooks.ts | 2 + .../Visualizer/Crust/Plugins/types.ts | 2 + .../Crust/Plugins/usePluginInstances.ts | 21 ++++++- .../{ => Crust}/StoryPanel/Block/Template.tsx | 0 .../Block/builtin/Camera/Content.tsx | 3 +- .../Block/builtin/Camera/Editor/hooks.ts | 0 .../Block/builtin/Camera/Editor/index.tsx | 0 .../StoryPanel/Block/builtin/Camera/index.tsx | 5 +- .../StoryPanel/Block/builtin/Image/index.tsx | 0 .../Block/builtin/Layer/Content.tsx | 3 +- .../Block/builtin/Layer/Editor/hooks.ts | 0 .../Block/builtin/Layer/Editor/index.tsx | 0 .../StoryPanel/Block/builtin/Layer/index.tsx | 5 +- .../Block/builtin/Markdown/Editor.tsx | 3 +- .../Block/builtin/Markdown/index.tsx | 4 +- .../Block/builtin/NextPage/index.tsx | 0 .../StoryPanel/Block/builtin/Text/Editor.tsx | 3 +- .../StoryPanel/Block/builtin/Text/index.tsx | 4 +- .../Block/builtin/Timeline/Editor.tsx | 2 +- .../StoryPanel/Block/builtin/Timeline/hook.ts | 7 +-- .../Block/builtin/Timeline/index.tsx | 0 .../StoryPanel/Block/builtin/Title/index.tsx | 4 +- .../Block/builtin/Video/VideoPlayer.tsx | 0 .../StoryPanel/Block/builtin/Video/index.tsx | 2 +- .../StoryPanel/Block/builtin/index.ts | 0 .../{ => Crust}/StoryPanel/Block/index.tsx | 2 +- .../StoryPanel/ClickAwayListener.tsx | 0 .../{ => Crust}/StoryPanel/Page/hooks.ts | 3 +- .../{ => Crust}/StoryPanel/Page/index.tsx | 14 +++-- .../PageIndicator/IndicatorSection.tsx | 0 .../PageIndicator/index.stories.tsx | 0 .../StoryPanel/PageIndicator/index.tsx | 0 .../StoryPanel/PanelContent/hooks.ts | 3 +- .../StoryPanel/PanelContent/index.tsx | 9 ++- .../{ => Crust}/StoryPanel/constants.ts | 0 .../{ => Crust}/StoryPanel/context.tsx | 0 .../{ => Crust}/StoryPanel/hooks.ts | 6 +- .../{ => Crust}/StoryPanel/index.tsx | 13 +++-- .../{ => Crust}/StoryPanel/types.ts | 0 .../{ => Crust}/StoryPanel/utils.ts | 0 .../beta/features/Visualizer/Crust/index.tsx | 55 +++++++++++++++++++ web/src/beta/features/Visualizer/index.tsx | 32 +++++------ .../shared/components/BlockWrapper/hooks.ts | 2 +- .../shared/components/BlockWrapper/index.tsx | 2 +- .../components/SelectableArea/index.tsx | 2 +- .../shared/hooks/useTimelineBlock.ts | 4 +- .../services/api/storytellingApi/blocks.ts | 7 +-- 57 files changed, 165 insertions(+), 84 deletions(-) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/Template.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Camera/Content.tsx (97%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Camera/Editor/hooks.ts (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Camera/Editor/index.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Camera/index.tsx (88%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Image/index.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Layer/Content.tsx (97%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Layer/Editor/hooks.ts (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Layer/Editor/index.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Layer/index.tsx (88%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Markdown/Editor.tsx (95%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Markdown/index.tsx (87%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/NextPage/index.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Text/Editor.tsx (93%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Text/index.tsx (86%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Timeline/Editor.tsx (98%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Timeline/hook.ts (97%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Timeline/index.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Title/index.tsx (88%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Video/VideoPlayer.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/Video/index.tsx (89%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/builtin/index.ts (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Block/index.tsx (93%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/ClickAwayListener.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Page/hooks.ts (95%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/Page/index.tsx (92%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/PageIndicator/IndicatorSection.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/PageIndicator/index.stories.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/PageIndicator/index.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/PanelContent/hooks.ts (95%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/PanelContent/index.tsx (92%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/constants.ts (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/context.tsx (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/hooks.ts (98%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/index.tsx (92%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/types.ts (100%) rename web/src/beta/features/Visualizer/{ => Crust}/StoryPanel/utils.ts (100%) diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx index 7b67964908..02df4370a6 100644 --- a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx +++ b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx @@ -3,7 +3,7 @@ import { useMemo } from "react"; import Button from "@reearth/beta/components/Button"; import Icon from "@reearth/beta/components/Icon"; import Modal from "@reearth/beta/components/Modal"; -import { getTimeZone } from "@reearth/beta/features/Visualizer/StoryPanel/utils"; +import { getTimeZone } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx index 021af565c2..1ab2aa3ff3 100644 --- a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx +++ b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx @@ -1,7 +1,7 @@ import { FC, useEffect, useState } from "react"; import DragAndDropList from "@reearth/beta/components/DragAndDropList"; -import { getFieldValue } from "@reearth/beta/features/Visualizer/StoryPanel/utils"; +import { getFieldValue } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils"; import { Panel, PanelProps } from "@reearth/beta/ui/layout"; import { isEmptyString } from "@reearth/beta/utils/util"; import { useT } from "@reearth/services/i18n"; diff --git a/web/src/beta/features/Editor/Visualizer/convert-story.ts b/web/src/beta/features/Editor/Visualizer/convert-story.ts index df85d9f64b..add1464d1b 100644 --- a/web/src/beta/features/Editor/Visualizer/convert-story.ts +++ b/web/src/beta/features/Editor/Visualizer/convert-story.ts @@ -1,4 +1,8 @@ -import { Story, StoryBlock, StoryPage } from "@reearth/beta/features/Visualizer/StoryPanel/types"; +import { + Story, + StoryBlock, + StoryPage, +} from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types"; import { Scene } from "@reearth/services/api/sceneApi"; import { StoryPage as GqlStoryPage, StoryBlock as GqlStoryBlock } from "@reearth/services/gql"; diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx index 59c206a8dd..3ece74253e 100644 --- a/web/src/beta/features/Editor/Visualizer/index.tsx +++ b/web/src/beta/features/Editor/Visualizer/index.tsx @@ -5,7 +5,7 @@ import { type InteractionModeType } from "@reearth/beta/features/Visualizer/Crus import { StoryPanelRef, type InstallableStoryBlock, -} from "@reearth/beta/features/Visualizer/StoryPanel"; +} from "@reearth/beta/features/Visualizer/Crust/StoryPanel"; import { SketchFeature, SketchType } from "@reearth/core"; import type { MapRef } from "@reearth/core"; import type { Story } from "@reearth/services/api/storytellingApi/utils"; diff --git a/web/src/beta/features/Editor/hooks/useStorytelling.ts b/web/src/beta/features/Editor/hooks/useStorytelling.ts index 36e9d4a900..bfe16e4c74 100644 --- a/web/src/beta/features/Editor/hooks/useStorytelling.ts +++ b/web/src/beta/features/Editor/hooks/useStorytelling.ts @@ -1,6 +1,6 @@ import { useState, useCallback, useMemo, useRef } from "react"; -import { StoryPanelRef } from "@reearth/beta/features/Visualizer/StoryPanel"; +import { StoryPanelRef } from "@reearth/beta/features/Visualizer/Crust/StoryPanel"; import useStorytellingAPI from "@reearth/services/api/storytellingApi"; import { useT } from "@reearth/services/i18n"; diff --git a/web/src/beta/features/Published/hooks.ts b/web/src/beta/features/Published/hooks.ts index f743201700..d3a2ad5d6b 100644 --- a/web/src/beta/features/Published/hooks.ts +++ b/web/src/beta/features/Published/hooks.ts @@ -7,7 +7,7 @@ import { BuiltinWidgets, isBuiltinWidget, } from "@reearth/beta/features/Visualizer/Crust"; -import { Story } from "@reearth/beta/features/Visualizer/StoryPanel"; +import { Story } from "@reearth/beta/features/Visualizer/Crust/StoryPanel"; import type { Camera } from "@reearth/beta/utils/value"; import { MapRef } from "@reearth/core"; import { config } from "@reearth/services/config"; diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx index de16ff61da..11f840876d 100644 --- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx +++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx @@ -2,8 +2,8 @@ import { memo, useContext, useMemo } from "react"; import "react18-json-view/src/style.css"; import "react18-json-view/src/dark.css"; +import Template from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/Template"; import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; -import Template from "@reearth/beta/features/Visualizer/StoryPanel/Block/Template"; import { coreContext } from "@reearth/core"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx index a8e436963d..339c0323ed 100644 --- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx @@ -1,4 +1,4 @@ -import Template from "@reearth/beta/features/Visualizer/StoryPanel/Block/Template"; +import Template from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/Template"; import { PropertyListItem } from "../ListEditor"; import ListItem from "../ListItem"; diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx index 768ae07c40..a56c6aabb1 100644 --- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx @@ -1,10 +1,10 @@ import { useCallback, type ComponentType, type ReactNode, memo } from "react"; +import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; import type { CommonBlockProps, BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; import type { Layer } from "@reearth/core"; // import { styled } from "@reearth/services/theme"; -import BlockWrapper from "../../../shared/components/BlockWrapper"; import { InfoboxBlock } from "../types"; import builtin, { isBuiltinInfoboxBlock } from "./builtin"; diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx index 4ca980310b..2350045613 100644 --- a/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx @@ -3,12 +3,11 @@ import { Fragment, ReactNode, memo } from "react"; import DragAndDropList from "@reearth/beta/components/DragAndDropList"; import BlockAddBar from "@reearth/beta/features/Visualizer/shared/components/BlockAddBar"; import { EditModeProvider } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext"; +import { InstallableBlock } from "@reearth/beta/features/Visualizer/shared/types"; import { ValueType, ValueTypes } from "@reearth/beta/utils/value"; import { Spacing } from "@reearth/core"; import { styled } from "@reearth/services/theme"; -import { InstallableBlock } from "../../shared/types"; - import InfoboxBlockComponent from "./Block"; import { GAP_DEFAULT_VALUE, diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks.ts index e364dac460..0a835a1162 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks.ts @@ -60,6 +60,7 @@ export default function ({ floatingWidgets, interactionMode, timelineManagerRef, + selectedStory, overrideInteractionMode, overrideSceneProperty, onLayerEdit, @@ -82,6 +83,7 @@ export default function ({ alignSystem, floatingWidgets, blocks: selectedLayer?.layer?.infobox?.blocks, + storyBlocks: selectedStory?.pages.flatMap(p => p.blocks), }); const clientStorage = useClientStorage(); diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts index bc9a99e99c..af5221533c 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts +++ b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts @@ -15,6 +15,7 @@ import type { } from "@reearth/core"; import { SketchEventCallback, SketchType, TimelineManagerRef } from "@reearth/core"; +import { Story } from "../StoryPanel"; import type { MapRef, InteractionModeType } from "../types"; import type { InternalWidget, WidgetAlignSystem } from "../Widgets"; @@ -36,6 +37,7 @@ export type Props = PropsWithChildren<{ alignSystem?: WidgetAlignSystem; floatingWidgets?: InternalWidget[]; timelineManagerRef?: TimelineManagerRef; + selectedStory?: Story; overrideSceneProperty?: (id: string, property: any) => void; interactionMode: InteractionModeType; overrideInteractionMode?: (mode: InteractionModeType) => void; diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts b/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts index ee5d8c2001..f2c9b1bce4 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts +++ b/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts @@ -1,6 +1,7 @@ import { useEffect, useRef, useMemo, type MutableRefObject } from "react"; import type { InfoboxBlock as Block } from "../Infobox/types"; +import { StoryBlock } from "../StoryPanel/types"; import type { WidgetAlignSystem } from "../Widgets"; import type { InternalWidget, WidgetSection, WidgetZone } from "../Widgets/WidgetAlignSystem"; @@ -10,6 +11,7 @@ export type Props = { alignSystem?: WidgetAlignSystem; floatingWidgets?: InternalWidget[]; blocks?: Block[]; + storyBlocks?: StoryBlock[]; }; export type PluginInstances = { @@ -26,7 +28,7 @@ export type PluginInstances = { }; }; -export default ({ alignSystem, floatingWidgets, blocks }: Props) => { +export default ({ alignSystem, floatingWidgets, blocks, storyBlocks }: Props) => { const pluginInstancesMeta = useRef([]); const runTimesCache = useMemo>(() => new Map(), []); @@ -104,8 +106,23 @@ export default ({ alignSystem, floatingWidgets, blocks }: Props) => { }); } + if (storyBlocks) { + storyBlocks.forEach(block => { + instances.push({ + id: block.id, + pluginId: block.pluginId ?? "", + name: getExtensionInstanceName(block.pluginId ?? ""), + extensionId: block.extensionId ?? "", + extensionType: "storyBlock", + get runTimes() { + return runTimesCacheHandler.get(block.id); + }, + }); + }); + } + pluginInstancesMeta.current = instances; - }, [alignSystem, floatingWidgets, blocks, runTimesCacheHandler]); + }, [alignSystem, floatingWidgets, blocks, storyBlocks, runTimesCacheHandler]); const pluginMessageSenders = useRef void>>(new Map()); diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/Template.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/Template.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/Template.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/Template.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx similarity index 97% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Content.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx index be7b333459..f30303a8c2 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Content.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx @@ -1,12 +1,11 @@ import { useCallback, useContext, useMemo, useState } from "react"; import Button from "@reearth/beta/components/Button"; +import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; import { useVisualizer } from "@reearth/core"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; -import { BlockContext } from "../../../../shared/components/BlockWrapper"; - import CameraEditor, { type CameraBlock as CameraBlockType } from "./Editor"; type Props = { diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Editor/hooks.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Editor/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx similarity index 88% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx index 3a6d7dbc46..c6392430c3 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx @@ -1,7 +1,8 @@ import { useEffect, useMemo } from "react"; -import BlockWrapper from "../../../../shared/components/BlockWrapper"; -import type { CommonBlockProps as BlockProps } from "../../../../shared/types"; +import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; +import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; + import { StoryBlock } from "../../../types"; import Content from "./Content"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Image/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Image/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx similarity index 97% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Content.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx index 30caa4cedf..0c78c7ee69 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Content.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx @@ -1,12 +1,11 @@ import { useCallback, useContext, useState } from "react"; import Button from "@reearth/beta/components/Button"; +import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; import { useBlockContext } from "@reearth/beta/features/Visualizer/shared/contexts/blockContext"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; -import { BlockContext } from "../../../../shared/components/BlockWrapper"; - import LayerEditor, { type LayerBlock as LayerBlockType } from "./Editor"; type Props = { diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Editor/hooks.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Editor/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx similarity index 88% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx index 1d662790d6..fab20df03a 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx @@ -1,7 +1,8 @@ import { useMemo, useEffect } from "react"; -import BlockWrapper from "../../../../shared/components/BlockWrapper"; -import type { CommonBlockProps as BlockProps } from "../../../../shared/types"; +import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; +import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; + import { StoryBlock } from "../../../types"; import Content from "./Content"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx similarity index 95% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/Editor.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx index c9cd63373c..8f6b54959f 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/Editor.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx @@ -2,11 +2,10 @@ import { debounce } from "lodash-es"; import { useContext, useCallback, useLayoutEffect, useRef, useMemo, useState } from "react"; import Markdown from "@reearth/beta/components/Markdown"; +import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; -import { BlockContext } from "../../../../shared/components/BlockWrapper"; - export type Props = { text: string; onUpdate: (text: string) => void; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx similarity index 87% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx index d00e9a33ab..0406dca3b2 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx @@ -1,9 +1,9 @@ import { useCallback, useMemo } from "react"; +import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; +import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; import { ValueTypes } from "@reearth/beta/utils/value"; -import BlockWrapper from "../../../../shared/components/BlockWrapper"; -import { CommonBlockProps as BlockProps } from "../../../../shared/types"; import { StoryBlock } from "../../../types"; import MdEditor from "./Editor"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/NextPage/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/NextPage/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx similarity index 93% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/Editor.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx index 1537ea1671..f41a2fda3f 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/Editor.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx @@ -1,10 +1,9 @@ import { debounce } from "lodash-es"; import { useMemo, useContext, useCallback } from "react"; +import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; import RichTextEditor from "@reearth/beta/lib/lexical/RichTextEditor"; -import { BlockContext } from "../../../../shared/components/BlockWrapper"; - export type Props = { text?: string; propertyId?: string; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx similarity index 86% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx index 156ef27407..1d60665fe2 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx @@ -1,10 +1,10 @@ import { useMemo } from "react"; +import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; +import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; import RichText from "@reearth/beta/lib/lexical/RichTextEditor"; import { ValueTypes } from "@reearth/beta/utils/value"; -import BlockWrapper from "../../../../shared/components/BlockWrapper"; -import { CommonBlockProps as BlockProps } from "../../../../shared/types"; import { StoryBlock } from "../../../types"; import TextBlockEditor from "./Editor"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx similarity index 98% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/Editor.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx index 060b5c7365..62e8eabb5e 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/Editor.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx @@ -1,7 +1,7 @@ import Icon from "@reearth/beta/components/Icon"; import * as Popover from "@reearth/beta/components/Popover"; +import useHooks from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook"; import useTimelineBlock from "@reearth/beta/features/Visualizer/shared/hooks/useTimelineBlock"; -import useHooks from "@reearth/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/hook"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/hook.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts similarity index 97% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/hook.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts index c7a8e59722..55e3cd5ed1 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/hook.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts @@ -14,12 +14,11 @@ import { formatDateForSliderTimeline, formatDateForTimeline, formatRangeDateAndTime, -} from "@reearth/beta/features/Visualizer/StoryPanel/utils"; +} from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils"; +import { DEFAULT_BLOCK_PADDING } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper/hooks"; +import { getNewDate } from "@reearth/beta/features/Visualizer/shared/hooks/useTimelineBlock"; import { TickEventCallback, TimelineCommitter } from "@reearth/core"; -import { DEFAULT_BLOCK_PADDING } from "../../../../shared/components/BlockWrapper/hooks"; -import { getNewDate } from "../../../../shared/hooks/useTimelineBlock"; - import { PaddingProp } from "./Editor"; import { TimelineValues } from "."; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Title/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx similarity index 88% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Title/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx index f5ed550623..280a89ec9f 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Title/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx @@ -1,13 +1,13 @@ import { useMemo } from "react"; import Text from "@reearth/beta/components/Text"; +import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; +import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; import { isEmptyString } from "@reearth/beta/utils/util"; import { ValueTypes } from "@reearth/beta/utils/value"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; -import BlockWrapper from "../../../../shared/components/BlockWrapper"; -import { CommonBlockProps as BlockProps } from "../../../../shared/types"; import { StoryBlock } from "../../../types"; const TitleBlock: React.FC> = ({ block, isSelected, ...props }) => { diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Video/VideoPlayer.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Video/VideoPlayer.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Video/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx similarity index 89% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Video/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx index dc32be5036..78ce5dea91 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Video/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx @@ -1,8 +1,8 @@ import { useMemo } from "react"; +import VideoPlayer from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer"; import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper"; import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; -import VideoPlayer from "@reearth/beta/features/Visualizer/StoryPanel/Block/builtin/Video/VideoPlayer"; import type { ValueTypes } from "@reearth/beta/utils/value"; import { StoryBlock } from "../../../types"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/Block/builtin/index.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts diff --git a/web/src/beta/features/Visualizer/StoryPanel/Block/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx similarity index 93% rename from web/src/beta/features/Visualizer/StoryPanel/Block/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx index 24aecf5e70..c8a5cd9858 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Block/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx @@ -1,9 +1,9 @@ import { useCallback, type ComponentType, type ReactNode } from "react"; +import type { CommonBlockProps, BlockProps } from "@reearth/beta/features/Visualizer/shared/types"; import type { Layer } from "@reearth/core"; import { styled } from "@reearth/services/theme"; -import type { CommonBlockProps, BlockProps } from "../../shared/types"; import { StoryBlock } from "../types"; import builtin, { isBuiltinStoryBlock } from "./builtin"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/ClickAwayListener.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/ClickAwayListener.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/ClickAwayListener.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/ClickAwayListener.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/Page/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts similarity index 95% rename from web/src/beta/features/Visualizer/StoryPanel/Page/hooks.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts index a0c1add4f4..725c0ab0bc 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Page/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts @@ -1,6 +1,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"; -import { useEditModeContext } from "../../shared/contexts/editModeContext"; +import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext"; + import { DEFAULT_STORY_PAGE_GAP, DEFAULT_STORY_PAGE_PADDING } from "../constants"; import { StoryPage } from "../types"; import { calculatePaddingValue } from "../utils"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/Page/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx similarity index 92% rename from web/src/beta/features/Visualizer/StoryPanel/Page/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx index d099a05db6..1f4a998b88 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/Page/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx @@ -1,15 +1,16 @@ import { Fragment, MutableRefObject, ReactNode, useEffect } from "react"; import DragAndDropList from "@reearth/beta/components/DragAndDropList"; +import BlockAddBar from "@reearth/beta/features/Visualizer/shared/components/BlockAddBar"; +import ContentWrapper from "@reearth/beta/features/Visualizer/shared/components/ContentWrapper"; +import SelectableArea from "@reearth/beta/features/Visualizer/shared/components/SelectableArea"; +import { useElementOnScreen } from "@reearth/beta/features/Visualizer/shared/hooks/useElementOnScreen"; import type { ValueType, ValueTypes } from "@reearth/beta/utils/value"; import type { InstallableStoryBlock } from "@reearth/services/api/storytellingApi/blocks"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; -import BlockAddBar from "../../shared/components/BlockAddBar"; -import ContentWrapper from "../../shared/components/ContentWrapper"; -import SelectableArea from "../../shared/components/SelectableArea"; -import { useElementOnScreen } from "../../shared/hooks/useElementOnScreen"; +import { BlockProps } from "../../../shared/types"; import StoryBlock from "../Block"; import { STORY_PANEL_CONTENT_ELEMENT_ID, @@ -17,6 +18,7 @@ import { MIN_STORY_PAGE_GAP_IN_EDITOR, STORY_PANEL_WIDTH, } from "../constants"; +import { StoryBlock as StoryBlockType } from "../types"; import useHooks, { type StoryPage } from "./hooks"; @@ -62,6 +64,7 @@ type Props = { schemaGroupId?: string, itemId?: string, ) => Promise; + renderBlock?: (block: BlockProps) => ReactNode; }; const StoryPanel: React.FC = ({ @@ -86,6 +89,7 @@ const StoryPanel: React.FC = ({ onPropertyItemAdd, onPropertyItemMove, onPropertyItemDelete, + renderBlock, }) => { const t = useT(); @@ -182,6 +186,7 @@ const StoryPanel: React.FC = ({ onPropertyItemAdd={onPropertyItemAdd} onPropertyItemMove={onPropertyItemMove} onPropertyItemDelete={onPropertyItemDelete} + renderBlock={renderBlock} /> )} {isEditable && !disableSelection && ( @@ -232,6 +237,7 @@ const StoryPanel: React.FC = ({ onPropertyItemAdd={onPropertyItemAdd} onPropertyItemMove={onPropertyItemMove} onPropertyItemDelete={onPropertyItemDelete} + renderBlock={renderBlock} padding={panelSettings?.padding?.value} /> {isEditable && !disableSelection && ( diff --git a/web/src/beta/features/Visualizer/StoryPanel/PageIndicator/IndicatorSection.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/PageIndicator/IndicatorSection.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/PageIndicator/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.stories.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/PageIndicator/index.stories.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.stories.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/PageIndicator/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/PageIndicator/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts similarity index 95% rename from web/src/beta/features/Visualizer/StoryPanel/PanelContent/hooks.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts index bc565cbbab..1ab99b3b77 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/PanelContent/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts @@ -1,6 +1,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; -import { useEditModeContext } from "../../shared/contexts/editModeContext"; +import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext"; + import { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants"; export type { StoryPage } from "../hooks"; diff --git a/web/src/beta/features/Visualizer/StoryPanel/PanelContent/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx similarity index 92% rename from web/src/beta/features/Visualizer/StoryPanel/PanelContent/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx index 340e27e8e6..d6e9edfc43 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/PanelContent/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx @@ -1,10 +1,12 @@ -import { MutableRefObject } from "react"; +import { MutableRefObject, ReactNode } from "react"; import { ValueType, ValueTypes } from "@reearth/beta/utils/value"; import type { InstallableStoryBlock } from "@reearth/services/api/storytellingApi/blocks"; import { styled } from "@reearth/services/theme"; +import { BlockProps } from "../../../shared/types"; import StoryPage from "../Page"; +import { StoryBlock } from "../types"; import useHooks, { STORY_PANEL_CONTENT_ELEMENT_ID, type StoryPage as StoryPageType } from "./hooks"; @@ -50,6 +52,7 @@ export type Props = { schemaGroupId?: string, itemId?: string, ) => Promise; + renderBlock?: (block: BlockProps) => ReactNode; }; const StoryContent: React.FC = ({ @@ -73,6 +76,7 @@ const StoryContent: React.FC = ({ onPropertyItemAdd, onPropertyItemMove, onPropertyItemDelete, + renderBlock, }) => { const { pageGap, scrollTimeoutRef, disableSelection, handleBlockCreate, handleBlockDelete } = useHooks({ @@ -107,7 +111,8 @@ const StoryContent: React.FC = ({ onPropertyUpdate={onPropertyUpdate} onPropertyItemAdd={onPropertyItemAdd} onPropertyItemMove={onPropertyItemMove} - onPropertyItemDelete={onPropertyItemDelete}> + onPropertyItemDelete={onPropertyItemDelete} + renderBlock={renderBlock}> onPageSelect?.(p.id)} /> ))} diff --git a/web/src/beta/features/Visualizer/StoryPanel/constants.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/constants.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts diff --git a/web/src/beta/features/Visualizer/StoryPanel/context.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/context.tsx similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/context.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/context.tsx diff --git a/web/src/beta/features/Visualizer/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts similarity index 98% rename from web/src/beta/features/Visualizer/StoryPanel/hooks.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts index d8d105e228..e63670c065 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/hooks.ts +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts @@ -1,14 +1,14 @@ import { Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"; -import type { Story, StoryPage } from "@reearth/beta/features/Visualizer/StoryPanel/types"; +import type { Story, StoryPage } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types"; import { useVisualizer } from "@reearth/core"; -import { MapRef } from "../Crust/types"; +import { MapRef } from "../../Crust/types"; import { DEFAULT_STORY_PAGE_DURATION, STORY_PANEL_CONTENT_ELEMENT_ID } from "./constants"; import { formatISO8601 } from "./utils"; -export type { Story, StoryPage } from "@reearth/beta/features/Visualizer/StoryPanel/types"; +export type { Story, StoryPage } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types"; export type StoryPanelRef = { currentPageId?: string; diff --git a/web/src/beta/features/Visualizer/StoryPanel/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx similarity index 92% rename from web/src/beta/features/Visualizer/StoryPanel/index.tsx rename to web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx index fe729a8991..71320f2592 100644 --- a/web/src/beta/features/Visualizer/StoryPanel/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx @@ -1,18 +1,18 @@ -import { forwardRef, memo, Ref, RefObject, useMemo } from "react"; +import { forwardRef, memo, ReactNode, Ref, RefObject, useMemo } from "react"; import { createPortal } from "react-dom"; +import { BlockProvider } from "@reearth/beta/features/Visualizer/shared/contexts/blockContext"; +import { EditModeProvider } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext"; +import { BlockProps, InstallableBlock } from "@reearth/beta/features/Visualizer/shared/types"; import { ValueType, ValueTypes } from "@reearth/beta/utils/value"; import { styled } from "@reearth/services/theme"; -import { BlockProvider } from "../shared/contexts/blockContext"; -import { EditModeProvider } from "../shared/contexts/editModeContext"; -import { InstallableBlock } from "../shared/types"; - import { STORY_PANEL_WIDTH } from "./constants"; import { PanelProvider, StoryPanelContext } from "./context"; import useHooks, { type StoryPanelRef, type Story } from "./hooks"; import PageIndicator from "./PageIndicator"; import StoryContent from "./PanelContent"; +import { StoryBlock } from "./types"; export type { Story, StoryPage, StoryPanelRef } from "./hooks"; @@ -54,6 +54,7 @@ export type StoryPanelProps = { schemaGroupId?: string, itemId?: string, ) => Promise; + renderBlock?: (block: BlockProps) => ReactNode; }; export const StoryPanel = memo( @@ -72,6 +73,7 @@ export const StoryPanel = memo( onPropertyItemAdd, onPropertyItemMove, onPropertyItemDelete, + renderBlock, }, ref: Ref, ) => { @@ -169,6 +171,7 @@ export const StoryPanel = memo( onPropertyItemAdd={onPropertyItemAdd} onPropertyItemMove={onPropertyItemMove} onPropertyItemDelete={onPropertyItemDelete} + renderBlock={renderBlock} /> diff --git a/web/src/beta/features/Visualizer/StoryPanel/types.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/types.ts similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/types.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/types.ts diff --git a/web/src/beta/features/Visualizer/StoryPanel/utils.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts similarity index 100% rename from web/src/beta/features/Visualizer/StoryPanel/utils.ts rename to web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts diff --git a/web/src/beta/features/Visualizer/Crust/index.tsx b/web/src/beta/features/Visualizer/Crust/index.tsx index 00017f1aee..7c1993b6e5 100644 --- a/web/src/beta/features/Visualizer/Crust/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/index.tsx @@ -9,6 +9,8 @@ import useHooks from "./hooks"; import Infobox, { InstallableInfoboxBlock } from "./Infobox"; import { Infobox as InfoboxType } from "./Infobox/types"; import Plugins, { type ExternalPluginProps, ModalContainer, PopupContainer } from "./Plugins"; +import StoryPanel, { InstallableStoryBlock, StoryPanelRef } from "./StoryPanel"; +import { Story } from "./StoryPanel/types"; import { usePublishTheme } from "./theme"; import type { MapRef, SceneProperty } from "./types"; import Widgets, { @@ -104,6 +106,29 @@ export type Props = { schemaGroupId?: string, itemId?: string, ) => Promise; + // Story + showStoryPanel?: boolean; + storyPanelRef?: RefObject; + storyWrapperRef?: RefObject; + selectedStory?: Story; + installableStoryBlocks?: InstallableStoryBlock[]; + onStoryPageChange?: (id?: string, disableScrollIntoView?: boolean) => void; + onStoryBlockCreate?: ( + pageId?: string | undefined, + extensionId?: string | undefined, + pluginId?: string | undefined, + index?: number | undefined, + ) => Promise; + onStoryBlockMove?: (id: string, targetId: number, blockId: string) => void; + onStoryBlockDelete?: (pageId?: string | undefined, blockId?: string | undefined) => Promise; + onPropertyValueUpdate?: ( + propertyId?: string, + schemaItemId?: string, + fieldId?: string, + itemId?: string, + vt?: ValueType, + v?: ValueTypes[ValueType], + ) => Promise; }; export default function Crust({ @@ -136,6 +161,17 @@ export default function Crust({ onPropertyItemAdd, onPropertyItemMove, onPropertyItemDelete, + // story + showStoryPanel, + storyPanelRef, + storyWrapperRef, + selectedStory, + installableStoryBlocks, + onStoryPageChange, + onStoryBlockCreate, + onStoryBlockMove, + onStoryBlockDelete, + onPropertyValueUpdate, }: Props): JSX.Element | null { const { interactionMode, @@ -206,6 +242,7 @@ export default function Crust({ selectedLayer={selectedLayer?.layer} selectedFeature={selectedComputedFeature} selectedFeatureInfo={selectedFeatureInfo} + selectedStory={selectedStory} layerSelectionReason={selectedLayer?.reason} viewport={viewport} alignSystem={widgetAlignSystem} @@ -259,6 +296,24 @@ export default function Crust({ onPropertyItemDelete={onPropertyItemDelete} onPropertyItemMove={onPropertyItemMove} /> + {showStoryPanel && ( + + )} ); } diff --git a/web/src/beta/features/Visualizer/index.tsx b/web/src/beta/features/Visualizer/index.tsx index a5ae1a38b7..93d2ef50c0 100644 --- a/web/src/beta/features/Visualizer/index.tsx +++ b/web/src/beta/features/Visualizer/index.tsx @@ -16,12 +16,12 @@ import { WidgetAreaState } from "@reearth/services/state"; import Crust from "./Crust"; import { InstallableInfoboxBlock } from "./Crust/Infobox"; +import { InstallableStoryBlock, StoryPanelRef } from "./Crust/StoryPanel"; +import { Position, Story } from "./Crust/StoryPanel/types"; import { InteractionModeType, MapRef, SceneProperty } from "./Crust/types"; import { Alignment, Widget, WidgetAlignSystem, WidgetLayoutConstraint } from "./Crust/Widgets"; import type { Location } from "./Crust/Widgets"; import useHooks from "./hooks"; -import StoryPanel, { InstallableStoryBlock, StoryPanelRef } from "./StoryPanel"; -import { Position, Story } from "./StoryPanel/types"; type VisualizerProps = { engine?: EngineType; @@ -201,23 +201,6 @@ const Visualizer: FC = ({ onSketchTypeChangeProp={handleSketchTypeChange} onSketchFeatureCreate={handleSketchFeatureCreate} onMount={handleMount}> - {showStoryPanel && ( - - )} = ({ onPropertyItemAdd={handlePropertyItemAdd} onPropertyItemMove={handlePropertyItemMove} onPropertyItemDelete={handlePropertyItemDelete} + // Story + showStoryPanel={showStoryPanel} + storyPanelRef={storyPanelRef} + storyWrapperRef={storyWrapperRef} + selectedStory={story} + installableStoryBlocks={installableStoryBlocks} + onStoryPageChange={handleStoryPageChange} + onStoryBlockCreate={handleStoryBlockCreate} + onStoryBlockMove={handleStoryBlockMove} + onStoryBlockDelete={handleStoryBlockDelete} + onPropertyValueUpdate={handlePropertyValueUpdate} /> diff --git a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts index d02e0d8c80..811a82d12f 100644 --- a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts +++ b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts @@ -3,7 +3,7 @@ import { useCallback, useMemo, useState, MouseEvent, useEffect } from "react"; import useDoubleClick from "@reearth/beta/utils/use-double-click"; import { Spacing } from "@reearth/core"; -import { calculatePaddingValue } from "../../../StoryPanel/utils"; +import { calculatePaddingValue } from "../../../Crust/StoryPanel/utils"; import { useEditModeContext } from "../../contexts/editModeContext"; export const DEFAULT_BLOCK_PADDING: Spacing = { top: 0, bottom: 0, left: 0, right: 0 }; diff --git a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx index 5c31cc7a29..d25e0b706b 100644 --- a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx +++ b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx @@ -3,7 +3,7 @@ import { ReactNode, createContext, memo } from "react"; import { stopClickPropagation } from "@reearth/beta/utils/events"; import { styled } from "@reearth/services/theme"; -import Template from "../../../StoryPanel/Block/Template"; +import Template from "../../../Crust/StoryPanel/Block/Template"; import { FieldComponent } from "../../hooks/useFieldComponent"; import SelectableArea from "../SelectableArea"; diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx b/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx index 10a43b9853..f4e10a064d 100644 --- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx +++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx @@ -4,7 +4,7 @@ import { useItemContext as useDnDItemContext } from "@reearth/beta/components/Dr import { ValueType, ValueTypes } from "@reearth/beta/utils/value"; import { styled } from "@reearth/services/theme"; -import ClickAwayListener from "../../../StoryPanel/ClickAwayListener"; +import ClickAwayListener from "../../../Crust/StoryPanel/ClickAwayListener"; import ActionPanel, { type ActionPosition } from "./ActionPanel"; import useHooks from "./hooks"; diff --git a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts index 20afdd203a..335b16addc 100644 --- a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts +++ b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts @@ -2,14 +2,14 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { useVisualizer, TickEventCallback, TimelineCommitter } from "@reearth/core"; -import { TimelineValues } from "../../StoryPanel/Block/builtin/Timeline"; +import { TimelineValues } from "../../Crust/StoryPanel/Block/builtin/Timeline"; import { convertOptionToSeconds, formatDateToSting, formatISO8601, formatTimezone, getTimeZone, -} from "../../StoryPanel/utils"; +} from "../../Crust/StoryPanel/utils"; export const getNewDate = (d?: Date) => d ?? new Date(); diff --git a/web/src/services/api/storytellingApi/blocks.ts b/web/src/services/api/storytellingApi/blocks.ts index 9159a72158..1e329c40e0 100644 --- a/web/src/services/api/storytellingApi/blocks.ts +++ b/web/src/services/api/storytellingApi/blocks.ts @@ -1,7 +1,6 @@ import { useMutation, useQuery } from "@apollo/client"; import { useCallback, useMemo } from "react"; -import { AVAILABLE_STORY_BLOCK_IDS } from "@reearth/beta/features/Visualizer/StoryPanel/constants"; import { MutationReturn } from "@reearth/services/api/types"; import { CreateStoryBlockInput, @@ -167,11 +166,7 @@ const getInstallableStoryBlocks = (rawScene?: GetSceneQuery) => { .map(p => { const plugin = p.plugin; return plugin?.extensions - .filter( - e => - e.type === PluginExtensionType.StoryBlock && - AVAILABLE_STORY_BLOCK_IDS.includes(`reearth/${e.extensionId}`), - ) + .filter(e => e.type === PluginExtensionType.StoryBlock) .map((e): InstallableStoryBlock => { return { name: e.translatedName ?? e.name,