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
reearth · Apr 4, 2023 · e1f5acb · e1f5acb
1 parent ae5c497
commit e1f5acb
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 36 deletions.
diff --git 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
@@ -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 : (
     <Wrapper state={state} bgcolor={bgcolor} duration={transitionDuration}>

diff --git a/src/components/molecules/Visualizer/Widget/index.tsx b/src/components/molecules/Visualizer/Widget/index.tsx
@@ -19,6 +19,7 @@ export type Widget = Omit<RawWidget, "layout" | "extended"> & { extended?: boole
 export type Props<PP = any, SP = any> = {
   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
@@ -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
@@ -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 : (
     <Wrapper state={state} bgcolor={bgcolor} duration={transitionDuration}>

diff --git 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
@@ -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
@@ -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,31 +105,51 @@ export default function Widgets({
             extended,
             layout,
             onExtend,
-            moveWidget,
+            onWidgetMove: moveWidget,
             onVisibilityChange,
           })
         }
         onVisibilityChange={onVisibilityChange}
         onExtend={onExtend}
       />
     ),
-    [context, isBuilt, isEditable, isMobile, renderWidget, theme, moveWidget, onVisibilityChange],
+    [
+      theme,
+      isEditable,
+      inEditor,
+      isBuilt,
+      isMobile,
+      context,
+      onVisibilityChange,
+      renderWidget,
+      moveWidget,
+    ],
   );
 
   return (
-    <WidgetAlignSystem
-      alignSystem={overriddenAlignSystem}
-      selectedWidgetArea={selectedWidgetArea}
-      invisibleWidgetIDs={invisibleWidgetIDs}
-      editing={editing}
-      built={isBuilt}
-      isMobile={isMobile}
-      layoutConstraint={layoutConstraint}
-      theme={theme}
-      renderWidget={renderWidgetInternal}
-      onAlignmentUpdate={onAlignmentUpdate}
-      onWidgetLayoutUpdate={onWidgetLayoutUpdate}
-      onWidgetAreaSelect={onWidgetAreaSelect}
-    />
+    <>
+      <WidgetAlignSystem
+        alignSystem={overriddenAlignSystem}
+        selectedWidgetArea={selectedWidgetArea}
+        invisibleWidgetIDs={invisibleWidgetIDs}
+        editing={editing}
+        built={isBuilt}
+        isMobile={isMobile}
+        layoutConstraint={layoutConstraint}
+        theme={theme}
+        renderWidget={renderWidgetInternal}
+        onAlignmentUpdate={onAlignmentUpdate}
+        onWidgetLayoutUpdate={onWidgetLayoutUpdate}
+        onWidgetAreaSelect={onWidgetAreaSelect}
+      />
+      {floatingWidgets?.map(w => (
+        <Fragment key={w.id}>
+          {renderWidgetInternal({
+            widget: w,
+            editing: false,
+          })}
+        </Fragment>
+      ))}
+    </>
   );
 }
diff --git 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}