From e1f5acbfa69d5d4c5ff0fc8fa34caa5384c23596 Mon Sep 17 00:00:00 2001 From: rot1024 Date: Tue, 4 Apr 2023 22:59:40 +0900 Subject: [PATCH] fix: enable splash screen in preview page (#596 * feat: support tiles data type on reearth/core (#597 * guessType * refactor * support tiles * fix * normalize url * fix: enable splash screen in preview page * fix * fix * fix * show floating widgets --- .../molecules/Visualizer/Engine/index.tsx | 1 + .../Visualizer/Widget/SplashScreen/index.tsx | 14 ++-- .../molecules/Visualizer/Widget/index.tsx | 1 + src/components/molecules/Visualizer/index.tsx | 2 + .../Widgets/Widget/SplashScreen/index.tsx | 12 ++-- src/core/Crust/Widgets/Widget/index.tsx | 1 + .../Crust/Widgets/WidgetAlignSystem/types.ts | 4 +- src/core/Crust/Widgets/index.tsx | 67 +++++++++++++------ src/core/Crust/index.tsx | 2 + 9 files changed, 68 insertions(+), 36 deletions(-) diff --git a/src/components/molecules/Visualizer/Engine/index.tsx b/src/components/molecules/Visualizer/Engine/index.tsx index f5a03392a7..0da4cb0c70 100644 --- a/src/components/molecules/Visualizer/Engine/index.tsx +++ b/src/components/molecules/Visualizer/Engine/index.tsx @@ -23,6 +23,7 @@ export type EngineProps = { style?: CSSProperties; isEditable?: boolean; isBuilt?: boolean; + inEditor?: boolean; property?: SceneProperty; camera?: Camera; clock?: Clock; diff --git a/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx b/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx index 5eab4a2823..ab74d2617e 100644 --- a/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx +++ b/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx @@ -29,7 +29,7 @@ export type Property = { }[]; }; -const SplashScreen = ({ widget, isBuilt }: Props): JSX.Element | null => { +const SplashScreen = ({ widget, inEditor }: Props): JSX.Element | null => { const ctx = useContext(); const { property } = widget ?? {}; const { @@ -42,7 +42,7 @@ const SplashScreen = ({ widget, isBuilt }: Props): JSX.Element | null => { overlayImageW: imageW, overlayImageH: imageH, overlayTitle: title, - } = (property as Property | undefined)?.overlay ?? {}; + } = property?.overlay ?? {}; const camera = (property as Property | undefined)?.camera?.filter(c => !!c.cameraPosition); const [cameraSequence, setCameraSequence] = useState(0); @@ -70,7 +70,7 @@ const SplashScreen = ({ widget, isBuilt }: Props): JSX.Element | null => { }); useTimeoutFn(() => { - if (isBuilt && enabled) { + if (!inEditor && enabled) { setActive(true); } }, delay * 1000); @@ -80,20 +80,20 @@ const SplashScreen = ({ widget, isBuilt }: Props): JSX.Element | null => { }, (delay + transitionDuration + duration) * 1000); useEffect(() => { - if (!isBuilt || !currentCamera) return; + if (inEditor || !currentCamera) return; const t = setTimeout(() => { setDelayedCameraSequence(i => i + 1); }, (currentCamera?.cameraDelay ?? 0) * 1000); return () => clearTimeout(t); - }, [currentCamera, isBuilt]); + }, [currentCamera, inEditor]); useEffect(() => { - if (!isBuilt || !delayedCurrentCamera) return; + if (inEditor || !delayedCurrentCamera) return; const t = setTimeout(() => { setCameraSequence(i => i + 1); }, (delayedCurrentCamera?.cameraDuration ?? 0) * 1000); return () => clearTimeout(t); - }, [delayedCurrentCamera, isBuilt]); + }, [delayedCurrentCamera, inEditor]); return state === "unmounted" ? null : ( diff --git a/src/components/molecules/Visualizer/Widget/index.tsx b/src/components/molecules/Visualizer/Widget/index.tsx index a8ea6f58c2..8e01a332e8 100644 --- a/src/components/molecules/Visualizer/Widget/index.tsx +++ b/src/components/molecules/Visualizer/Widget/index.tsx @@ -19,6 +19,7 @@ export type Widget = Omit & { extended?: boole export type Props = { isEditable?: boolean; isBuilt?: boolean; + inEditor?: boolean; widget: Widget; extended?: boolean; sceneProperty?: SP; diff --git a/src/components/molecules/Visualizer/index.tsx b/src/components/molecules/Visualizer/index.tsx index bfecd140a6..a8adc2b93c 100644 --- a/src/components/molecules/Visualizer/index.tsx +++ b/src/components/molecules/Visualizer/index.tsx @@ -217,6 +217,7 @@ export default function Visualizer({ !!widgets?.ownBuiltinWidgets?.[NAVIGATOR_BUILTIN_WIDGET_ID] } meta={engineMeta} + inEditor={inEditor} onLayerSelect={selectLayer} onCameraChange={updateCamera} onTick={updateClock} @@ -255,6 +256,7 @@ export default function Visualizer({ onPluginPopupShow={onPluginPopupShow} isEditable={props.isEditable} isBuilt={props.isBuilt} + inEditor={inEditor} pluginBaseUrl={pluginBaseUrl} viewport={viewport} /> diff --git a/src/core/Crust/Widgets/Widget/SplashScreen/index.tsx b/src/core/Crust/Widgets/Widget/SplashScreen/index.tsx index e4ada43905..37708371be 100644 --- a/src/core/Crust/Widgets/Widget/SplashScreen/index.tsx +++ b/src/core/Crust/Widgets/Widget/SplashScreen/index.tsx @@ -32,7 +32,7 @@ export type Property = { const SplashScreen = ({ widget, - isBuilt, + inEditor, isMobile, onVisibilityChange, context: { onFlyTo } = {}, @@ -81,7 +81,7 @@ const SplashScreen = ({ }); useTimeoutFn(() => { - if (isBuilt && enabled) { + if (!inEditor && enabled) { setActive(true); } }, delay * 1000); @@ -91,20 +91,20 @@ const SplashScreen = ({ }, (delay + transitionDuration + duration) * 1000); useEffect(() => { - if (!isBuilt || !currentCamera) return; + if (inEditor || !currentCamera) return; const t = setTimeout(() => { setDelayedCameraSequence(i => i + 1); }, (currentCamera?.cameraDelay ?? 0) * 1000); return () => clearTimeout(t); - }, [currentCamera, isBuilt]); + }, [currentCamera, inEditor]); useEffect(() => { - if (!isBuilt || !delayedCurrentCamera) return; + if (inEditor || !delayedCurrentCamera) return; const t = setTimeout(() => { setCameraSequence(i => i + 1); }, (delayedCurrentCamera?.cameraDuration ?? 0) * 1000); return () => clearTimeout(t); - }, [delayedCurrentCamera, isBuilt]); + }, [delayedCurrentCamera, inEditor]); return !visible || state === "unmounted" ? null : ( diff --git a/src/core/Crust/Widgets/Widget/index.tsx b/src/core/Crust/Widgets/Widget/index.tsx index 953afb9ab7..ee63624e7f 100644 --- a/src/core/Crust/Widgets/Widget/index.tsx +++ b/src/core/Crust/Widgets/Widget/index.tsx @@ -25,6 +25,7 @@ export type Props = { layout?: WidgetLayout; theme?: Theme; isEditable?: boolean; + inEditor?: boolean; isBuilt?: boolean; isMobile?: boolean; context?: Context; diff --git a/src/core/Crust/Widgets/WidgetAlignSystem/types.ts b/src/core/Crust/Widgets/WidgetAlignSystem/types.ts index e94d1673e1..972f32618c 100644 --- a/src/core/Crust/Widgets/WidgetAlignSystem/types.ts +++ b/src/core/Crust/Widgets/WidgetAlignSystem/types.ts @@ -54,8 +54,8 @@ export type WidgetLayoutConstraint = { export type WidgetProps = { widget: InternalWidget; - layout: WidgetLayout; + layout?: WidgetLayout; extended?: boolean; editing: boolean; - onExtend: (id: string, extended: boolean | undefined) => void; + onExtend?: (id: string, extended: boolean | undefined) => void; }; diff --git a/src/core/Crust/Widgets/index.tsx b/src/core/Crust/Widgets/index.tsx index 1ac59508de..7e20e0f4d8 100644 --- a/src/core/Crust/Widgets/index.tsx +++ b/src/core/Crust/Widgets/index.tsx @@ -1,6 +1,6 @@ -import { ReactNode, useCallback } from "react"; +import { Fragment, ReactNode, useCallback } from "react"; -import type { Theme, Widget, WidgetLayout, WidgetLocationOptions } from "./types"; +import type { InternalWidget, Theme, Widget, WidgetLayout, WidgetLocationOptions } from "./types"; import useWidgetAlignSystem from "./useWidgetAlignSystem"; import WidgetComponent, { type Context } from "./Widget"; import WidgetAlignSystem, { @@ -30,12 +30,14 @@ export type { Widget, InternalWidget, WidgetLocationOptions, WidgetAlignment } f export type Props = { alignSystem?: WidgetAlignSystemType; + floatingWidgets?: InternalWidget[]; selectedWidgetArea?: WidgetAreaType; layoutConstraint?: { [w: string]: WidgetLayoutConstraint }; editing?: boolean; isMobile?: boolean; theme?: Theme; isEditable?: boolean; + inEditor?: boolean; isBuilt?: boolean; context?: Context; renderWidget?: (props: WidgetProps) => ReactNode; @@ -55,20 +57,22 @@ export type WidgetProps = { widget: Widget; editing: boolean; extended?: boolean; - layout: WidgetLayout; - onExtend: (id: string, extended: boolean | undefined) => void; - moveWidget: (widgetId: string, options: WidgetLocationOptions) => void; + layout?: WidgetLayout; + onExtend?: (id: string, extended: boolean | undefined) => void; + onWidgetMove?: (widgetId: string, options: WidgetLocationOptions) => void; onVisibilityChange: (widgetId: string, v: boolean) => void; }; export default function Widgets({ alignSystem, + floatingWidgets, selectedWidgetArea, editing, isMobile, layoutConstraint, theme, isEditable, + inEditor, isBuilt, context, renderWidget, @@ -90,6 +94,7 @@ export default function Widgets({ layout={layout} theme={theme} isEditable={isEditable} + inEditor={inEditor} isBuilt={isBuilt} isMobile={isMobile} context={context} @@ -100,7 +105,7 @@ export default function Widgets({ extended, layout, onExtend, - moveWidget, + onWidgetMove: moveWidget, onVisibilityChange, }) } @@ -108,23 +113,43 @@ export default function Widgets({ onExtend={onExtend} /> ), - [context, isBuilt, isEditable, isMobile, renderWidget, theme, moveWidget, onVisibilityChange], + [ + theme, + isEditable, + inEditor, + isBuilt, + isMobile, + context, + onVisibilityChange, + renderWidget, + moveWidget, + ], ); return ( - + <> + + {floatingWidgets?.map(w => ( + + {renderWidgetInternal({ + widget: w, + editing: false, + })} + + ))} + ); } diff --git a/src/core/Crust/index.tsx b/src/core/Crust/index.tsx index c20da9e687..c62df8ffdb 100644 --- a/src/core/Crust/index.tsx +++ b/src/core/Crust/index.tsx @@ -198,7 +198,9 @@ export default function Crust({ isMobile={isMobile} isBuilt={isBuilt} isEditable={isEditable} + inEditor={inEditor} alignSystem={widgetAlignSystem} + floatingWidgets={floatingWidgets} selectedWidgetArea={selectedWidgetArea} editing={widgetAlignSystemEditing} layoutConstraint={widgetLayoutConstraint}