fix(web): support built-in widget visible on WAS

web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx

@@ -7,7 +7,6 @@ import Text from "@reearth/beta/components/Text";
 import { styled, metricsSizes, mask } from "@reearth/services/theme";
 
 import type { Camera, FlyToDestination, Theme } from "../../types";
-import { Visible } from "../../useVisible";
 
 export type Button = {
   id: string;
@@ -19,7 +18,7 @@ export type Button = {
   buttonColor?: string;
   buttonBgcolor?: string;
   buttonCamera?: Camera;
-  visible: Visible;
+  visible?: "always" | "desktop" | "mobile";
 };
 
 export type MenuItem = {

web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Button/index.tsx

@@ -1,7 +1,6 @@
 import { styled } from "@reearth/services/theme";
 
 import type { ComponentProps as WidgetProps } from "../..";
-import { useVisible } from "../../useVisible";
 
 import MenuButton, { Button as ButtonType, MenuItem as MenuItemType } from "./MenuButton";
 
@@ -13,22 +12,10 @@ export type Property = {
   menu?: MenuItem[];
 };
 
-const Menu = ({
-  widget,
-  theme,
-  isMobile,
-  onVisibilityChange,
-  context: { onFlyTo } = {},
-}: Props): JSX.Element | null => {
+const Menu = ({ widget, theme, context: { onFlyTo } = {} }: Props): JSX.Element | null => {
   const { default: button, menu: menuItems } = widget.property ?? {};
-  const visible = useVisible({
-    widgetId: widget.id,
-    visible: widget.property?.default?.visible,
-    isMobile,
-    onVisibilityChange,
-  });
 
-  return visible ? (
+  return (
     <Wrapper>
       <MenuButton
         theme={theme}
@@ -39,7 +26,7 @@ const Menu = ({
         onFlyTo={onFlyTo}
       />
     </Wrapper>
-  ) : null;
+  );
 };
 
 const Wrapper = styled.div`

web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Navigator/hooks.ts

@@ -1,21 +1,17 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 
 import type { Camera, FlyToDestination, Widget } from "../../types";
-import { useVisible } from "../../useVisible";
 
 import { degreeToRadian, radianToDegree } from "./UI";
 
 export default function ({
   camera,
   initialCamera,
-  widget,
-  isMobile,
   onZoomIn,
   onZoomOut,
   onCameraOrbit,
   onCameraRotateRight,
   onFlyTo,
-  onVisibilityChange,
 }: {
   camera?: Camera;
   initialCamera?: Camera;
@@ -26,18 +22,11 @@ export default function ({
   onCameraOrbit?: (orbit: number) => void;
   onCameraRotateRight?: (radian: number) => void;
   onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
-  onVisibilityChange?: (id: string, visible: boolean) => void;
 }) {
   const [degree, setDegree] = useState(0);
   const [isHelpOpened, setIsHelpOpened] = useState(false);
   const orbitRadianRef = useRef(0);
   const isMovingOrbit = useRef(false);
-  const visible = useVisible({
-    widgetId: widget.id,
-    visible: widget.property?.default?.visible,
-    isMobile,
-    onVisibilityChange,
-  });
 
   const handleOnRotate = useCallback(
     (deg: number) => {
@@ -101,7 +90,6 @@ export default function ({
   return {
     degree,
     isHelpOpened,
-    visible,
     events: {
       onRotate: handleOnRotate,
       onStartOrbit: handleOnStartOrbit,

web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Navigator/index.tsx

@@ -1,22 +1,14 @@
 import type { ComponentProps as WidgetProps } from "../..";
-import { Visible } from "../../useVisible";
 
 import useHooks from "./hooks";
 import NavigatorUI from "./UI";
 
-export type Props = WidgetProps<Property>;
-
-export type Property = {
-  default: {
-    visible: Visible;
-  };
-};
+export type Props = WidgetProps;
 
 const Navigator = ({
   theme,
   widget,
   isMobile,
-  onVisibilityChange,
   context: {
     camera,
     initialCamera,
@@ -27,7 +19,7 @@ const Navigator = ({
     onZoomOut,
   } = {},
 }: Props): JSX.Element | null => {
-  const { degree, visible, events } = useHooks({
+  const { degree, events } = useHooks({
     camera,
     initialCamera,
     widget,
@@ -37,10 +29,9 @@ const Navigator = ({
     onFlyTo,
     onZoomIn,
     onZoomOut,
-    onVisibilityChange,
   });
 
-  return visible ? <NavigatorUI theme={theme} degree={degree} {...events} /> : null;
+  return <NavigatorUI theme={theme} degree={degree} {...events} />;
 };
 
 export default Navigator;

web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Timeline/hooks.ts

@@ -5,7 +5,6 @@ import { TickEvent, TickEventCallback } from "@reearth/beta/lib/core/Map";
 import { TimelineManagerRef } from "@reearth/beta/lib/core/Map/useTimelineManager";
 
 import type { Widget } from "../../types";
-import { useVisible } from "../../useVisible";
 
 const MAX_RANGE = 86400000; // a day
 const getOrNewDate = (d?: Date) => d ?? new Date();
@@ -31,7 +30,6 @@ export const useTimeline = ({
   onTick,
   removeTickEventListener,
   onExtend,
-  onVisibilityChange,
 }: {
   widget: Widget;
   timelineManagerRef?: TimelineManagerRef;
@@ -43,14 +41,7 @@ export const useTimeline = ({
   onTick?: TickEvent;
   removeTickEventListener?: TickEvent;
   onExtend?: (id: string, extended: boolean | undefined) => void;
-  onVisibilityChange?: (id: string, v: boolean) => void;
 }) => {
-  const visible = useVisible({
-    widgetId: widget.id,
-    visible: widget.property?.default?.visible,
-    isMobile,
-    onVisibilityChange,
-  });
   const widgetId = widget.id;
   const [range, setRange] = useState(() =>
     makeRange(
@@ -225,7 +216,6 @@ export const useTimeline = ({
     range,
     isOpened,
     currentTime,
-    visible,
     events: {
       onOpen: handleOnOpen,
       onClose: handleOnClose,

web/src/beta/lib/core/Crust/Widgets/Widget/builtin/Timeline/index.tsx

@@ -2,24 +2,16 @@ import TimelineUI from "@reearth/beta/lib/core/Crust/Widgets/Widget/builtin/Time
 import { styled } from "@reearth/services/theme";
 
 import type { ComponentProps as WidgetProps } from "../..";
-import { Visible } from "../../useVisible";
 
 import { useTimeline } from "./hooks";
 
-export type Props = WidgetProps<Property>;
-
-export type Property = {
-  default: {
-    visible: Visible;
-  };
-};
+export type Props = WidgetProps;
 
 const Timeline = ({
   widget,
   theme,
   isMobile,
   onExtend,
-  onVisibilityChange,
   context: {
     timelineManagerRef,
     onPlay,
@@ -30,7 +22,7 @@ const Timeline = ({
     removeTickEventListener,
   } = {},
 }: Props): JSX.Element | null => {
-  const { isOpened, currentTime, range, speed, events, visible } = useTimeline({
+  const { isOpened, currentTime, range, speed, events } = useTimeline({
     widget,
     timelineManagerRef,
     isMobile,
@@ -41,10 +33,9 @@ const Timeline = ({
     onTick,
     removeTickEventListener,
     onExtend,
-    onVisibilityChange,
   });
 
-  return visible ? (
+  return (
     <Widget extended={!!widget?.extended?.horizontally} opened={isOpened}>
       <TimelineUI
         isOpened={isOpened}
@@ -55,7 +46,7 @@ const Timeline = ({
         {...events}
       />
     </Widget>
-  ) : null;
+  );
 };
 
 const Widget = styled.div<{

web/src/beta/lib/core/Crust/Widgets/Widget/index.tsx

@@ -32,7 +32,6 @@ export type Props = {
   isMobile?: boolean;
   context?: Context;
   onExtend?: (id: string, extended: boolean | undefined) => void;
-  onVisibilityChange?: (id: string, visible: boolean) => void;
   renderWidget?: (w: Widget) => ReactNode;
 };
 

web/src/beta/lib/core/Crust/Widgets/WidgetAlignSystem/Area.tsx

@@ -14,6 +14,7 @@ import type {
   WidgetProps,
   InternalWidget,
 } from "./types";
+import { isInvisibleBuiltin } from "./utils";
 
 export type WidgetAreaType = {
   zone: "inner" | "outer";
@@ -39,6 +40,7 @@ type Props = {
   centered?: boolean;
   built?: boolean;
   widgets?: InternalWidget[];
+  isMobile?: boolean;
   onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
   // note that layoutConstraint will be always undefined in published pages
   layoutConstraint?: { [w in string]: WidgetLayoutConstraint };
@@ -58,6 +60,7 @@ export default function Area({
   built,
   widgets,
   layoutConstraint,
+  isMobile,
   renderWidget,
   onWidgetAreaSelect,
 }: Props) {
@@ -136,36 +139,39 @@ export default function Area({
         alignItems: centered ? "center" : "unset",
       }}
       iconColor={area === "middle" ? "#4770FF" : "#E95518"}>
-      {widgets?.map((widget, i) => {
-        const constraint =
-          widget.pluginId && widget.extensionId
-            ? layoutConstraint?.[`${widget.pluginId}/${widget.extensionId}`]
-            : undefined;
-        const extended = overriddenExtended?.[widget.id];
-        const extendable2 =
-          (section === "center" && constraint?.extendable?.horizontally) ||
-          (area === "middle" && constraint?.extendable?.vertically);
-        return (
-          <GridItem
-            key={widget.id}
-            id={widget.id}
-            index={i}
-            extended={extended ?? widget.extended}
-            extendable={extendable2}
-            style={{ pointerEvents: "none", margin: 0 }}
-            editorStyle={{ margin: 0 }}>
-            {({ editing }) =>
-              renderWidget?.({
-                widget,
-                layout,
-                extended,
-                editing,
-                onExtend: handleExtend,
-              })
-            }
-          </GridItem>
-        );
-      })}
+      {widgets
+        ?.filter(widget => !isInvisibleBuiltin(widget, isMobile))
+        .map((widget, i) => {
+          const constraint =
+            widget.pluginId && widget.extensionId
+              ? layoutConstraint?.[`${widget.pluginId}/${widget.extensionId}`]
+              : undefined;
+          const extended = overriddenExtended?.[widget.id];
+          const extendable2 =
+            (section === "center" && constraint?.extendable?.horizontally) ||
+            (area === "middle" && constraint?.extendable?.vertically);
+
+          return (
+            <GridItem
+              key={widget.id}
+              id={widget.id}
+              index={i}
+              extended={extended ?? widget.extended}
+              extendable={extendable2}
+              style={{ pointerEvents: "none", margin: 0 }}
+              editorStyle={{ margin: 0 }}>
+              {({ editing }) =>
+                renderWidget?.({
+                  widget,
+                  layout,
+                  extended,
+                  editing,
+                  onExtend: handleExtend,
+                })
+              }
+            </GridItem>
+          );
+        })}
     </GridArea>
   ) : null;
 }