chore(web): misc bug fixes improvements

web/src/beta/components/SidePanelSectionField/index.tsx

@@ -1,4 +1,4 @@
-import { useState, ReactNode } from "react";
+import { useState, ReactNode, useEffect } from "react";
 
 import { styled, useTheme } from "@reearth/services/theme";
 
@@ -8,10 +8,15 @@ import Text from "../Text";
 const SidePanelSectionField: React.FC<{
   className?: string;
   title?: string;
+  startCollapsed?: boolean;
   children?: ReactNode;
-}> = ({ className, title, children }) => {
+}> = ({ className, title, startCollapsed, children }) => {
   const theme = useTheme();
-  const [opened, setOpened] = useState(true);
+  const [opened, setOpened] = useState<boolean>();
+
+  useEffect(() => {
+    setOpened(!startCollapsed ?? true);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Field className={className}>
@@ -42,7 +47,7 @@ const Header = styled.div`
   height: 38px;
 `;
 
-const ArrowIcon = styled(Icon)<{ opened: boolean }>`
+const ArrowIcon = styled(Icon)<{ opened?: boolean }>`
   transform: rotate(${props => (props.opened ? 90 : 180)}deg);
   transition: all 0.2s;
 `;

web/src/beta/features/Editor/Visualizer/hooks.ts

@@ -29,6 +29,8 @@
   useZoomedLayerId,
   useSelectedLayer,
   useSelectedStoryPageId,
+  useSelectedLayerStyle,
+  useSelectedSceneSetting,
 } from "@reearth/services/state";
 
 import { convertWidgets, processLayers, processProperty } from "./convert";
@@ -68,6 +70,8 @@
   const [zoomedLayerId, zoomToLayer] = useZoomedLayerId();
 
   const [selectedLayer, setSelectedLayer] = useSelectedLayer();
+  const [, setSelectedLayerStyle] = useSelectedLayerStyle();
+  const [, setSelectedSceneSetting] = useSelectedSceneSetting();
 
   const [selectedWidgetArea, setSelectedWidgetArea] = useSelectedWidgetArea();
   const [isVisualizerReady, setIsVisualizerReady] = useIsVisualizerReady();
@@ -101,13 +105,16 @@
       feature?: ComputedFeature,
       layerSelectionReason?: LayerSelectionReason,
     ) => {
-      if (id === selectedLayer?.layerId && feature?.id === selectedLayer?.feature?.id) return;
-
+      if (id === selectedLayer?.layerId || !feature) return;
+      if (id) {
+        setSelectedLayerStyle(undefined);
+        setSelectedSceneSetting(undefined);
+      }
       setSelectedLayer(
         id ? { layerId: id, layer: await layer?.(), feature, layerSelectionReason } : undefined,
       );
     },
-    [selectedLayer, setSelectedLayer],
+    [selectedLayer, setSelectedLayer, setSelectedLayerStyle, setSelectedSceneSetting],
   );
 
   const handleDropLayer = useCallback(
@@ -141,7 +148,7 @@
   // Plugin
   const pluginProperty = useMemo(
     () =>
       scene?.plugins.reduce<{ [key: string]: any }>(
         (a, b) => ({ ...a, [b.pluginId]: processProperty(b.property) }),
         {},
       ),
@@ -158,7 +165,7 @@
       vt: T,
       selectedLayer?: Layer,
     ) => {
       const propertyId = (selectedLayer?.infobox?.blocks?.find(b => b.id === blockId) as any)
         ?.propertyId as string | undefined;
       if (!propertyId) return;
 

web/src/beta/features/Editor/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
 
 import Resizable from "@reearth/beta/components/Resizable";
 import useBottomPanel from "@reearth/beta/features/Editor/useBottomPanel";
@@ -92,26 +92,29 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
   const handleLayerStyleSelected = useCallback(
     (layerStyleId: string) => {
       handleLayerSelect(undefined);
+      handleSceneSettingSelect(undefined);
       handleLayerStyleSelect(layerStyleId);
     },
-    [handleLayerStyleSelect, handleLayerSelect],
+    [handleLayerStyleSelect, handleSceneSettingSelect, handleLayerSelect],
   );
 
   const handleLayerSelected = useCallback(
     (layerId: string) => {
       setSelectedLayerStyleId(undefined);
+      handleSceneSettingSelect(undefined);
       handleLayerSelect(layerId);
     },
-    [handleLayerSelect, setSelectedLayerStyleId],
+    [handleLayerSelect, handleSceneSettingSelect, setSelectedLayerStyleId],
   );
 
-  useEffect(() => {
-    if (selectedLayer) {
+  const handleSceneSettingSelected = useCallback(
+    (collection?: string) => {
       setSelectedLayerStyleId(undefined);
-    } else if (selectedLayerStyle) {
       handleLayerSelect(undefined);
-    }
-  }, [selectedLayer, selectedLayerStyle, setSelectedLayerStyleId, handleLayerSelect]);
+      handleSceneSettingSelect(collection);
+    },
+    [handleLayerSelect, handleSceneSettingSelect, setSelectedLayerStyleId],
+  );
 
   const { leftPanel } = useLeftPanel({
     tab,
@@ -130,7 +133,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     onLayerSelect: handleLayerSelected,
     onLayerNameUpdate: handleLayerNameUpdate,
     onLayerVisibilityUpate: handleLayerVisibilityUpdate,
-    onSceneSettingSelect: handleSceneSettingSelect,
+    onSceneSettingSelect: handleSceneSettingSelected,
     onDataSourceManagerOpen: handleDataSourceManagerOpener,
     onFlyTo: handleFlyTo,
   });

web/src/beta/features/Editor/useLayerStyles.ts

@@ -1,8 +1,9 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 
 import { LayerAppearanceTypes } from "@reearth/beta/lib/core/mantle";
 import { useLayerStylesFetcher } from "@reearth/services/api";
 import { useT } from "@reearth/services/i18n";
+import { useSelectedLayerStyle } from "@reearth/services/state";
 
 type LayerStyleProps = {
   sceneId: string;
@@ -27,7 +28,7 @@ export default function ({ sceneId }: LayerStyleProps) {
   const t = useT();
   const { useAddLayerStyle, useGetLayerStylesQuery, useRemoveLayerStyle, useUpdateLayerStyle } =
     useLayerStylesFetcher();
-  const [selectedLayerStyleId, setSelectedLayerStyleId] = useState<string | undefined>(undefined);
+  const [selectedLayerStyleId, setSelectedLayerStyleId] = useSelectedLayerStyle();
   const { layerStyles = [] } = useGetLayerStylesQuery({ sceneId });
 
   const selectedLayerStyle = useMemo(
@@ -38,7 +39,7 @@ export default function ({ sceneId }: LayerStyleProps) {
   const handleLayerStyleSelect = useCallback(
     (layerId: string) =>
       setSelectedLayerStyleId(prevId => (prevId === layerId ? undefined : layerId)),
-    [],
+    [setSelectedLayerStyleId],
   );
 
   const handleLayerStyleDelete = useCallback(
@@ -55,7 +56,7 @@ export default function ({ sceneId }: LayerStyleProps) {
         );
       }
     },
-    [layerStyles, selectedLayerStyleId, useRemoveLayerStyle],
+    [layerStyles, selectedLayerStyleId, setSelectedLayerStyleId, useRemoveLayerStyle],
   );
 
   const handleLayerStyleAdd = useCallback(

web/src/beta/features/Editor/useScene.ts

@@ -1,30 +1,34 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 
 import { useSceneFetcher } from "@reearth/services/api";
 import { convert } from "@reearth/services/api/propertyApi/utils";
+import { useSelectedSceneSetting } from "@reearth/services/state";
 
 type SceneProps = {
   sceneId?: string;
 };
 
 export default function ({ sceneId }: SceneProps) {
   const { useSceneQuery } = useSceneFetcher();
-  const [selectedSceneSetting, setSceneSetting] = useState<string | undefined>();
+  const [selectedSceneSetting, setSelectedSceneSetting] = useSelectedSceneSetting();
 
   const { scene } = useSceneQuery({ sceneId });
   const sceneSettings = useMemo(
     () => convert(scene?.property)?.filter(item => item.collection === selectedSceneSetting),
     [scene?.property, selectedSceneSetting],
   );
   const handleSceneSettingSelect = useCallback(
-    (collection: string) => setSceneSetting(collection),
-    [],
+    (collection?: string) =>
+      setSelectedSceneSetting(
+        !collection || selectedSceneSetting === collection ? undefined : collection,
+      ),
+    [selectedSceneSetting, setSelectedSceneSetting],
   );
 
   return {
     scene,
     selectedSceneSetting,
-    handleSceneSettingSelect,
     sceneSettings,
+    handleSceneSettingSelect,
   };
 }

web/src/beta/lib/core/StoryPanel/Page/hooks.ts

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { DEFAULT_STORY_PAGE_GAP, DEFAULT_STORY_PAGE_PADDING } from "../constants";
+import {
+  DEFAULT_STORY_PAGE_GAP,
+  DEFAULT_STORY_PAGE_PADDING,
+  MIN_STORY_PAGE_GAP_IN_EDITOR,
+} from "../constants";
 import { StoryPage } from "../types";
 import { calculatePaddingValue } from "../utils";
 
@@ -50,7 +54,12 @@ export default ({
           isEditable,
         ),
       },
-      gap: property?.panel?.gap ?? DEFAULT_STORY_PAGE_GAP,
+      gap: {
+        value:
+          property?.panel?.gap?.value ?? isEditable
+            ? MIN_STORY_PAGE_GAP_IN_EDITOR
+            : DEFAULT_STORY_PAGE_GAP,
+      },
     }),
     [property?.panel, isEditable],
   );

web/src/beta/lib/core/StoryPanel/Page/index.tsx

@@ -170,9 +170,9 @@ const Wrapper = styled.div<{ padding: Spacing; gap?: number }>`
   color: ${({ theme }) => theme.content.weaker};
   ${({ gap }) => gap && `gap: ${gap}px;`}
 
-  padding-top: ${({ padding }) => padding.top + "px"};
-  padding-bottom: ${({ padding }) => padding.bottom + "px"};
-  padding-left: ${({ padding }) => padding.left + "px"};
-  padding-right: ${({ padding }) => padding.right + "px"};
+  ${({ padding }) => `padding-top: ${padding.top}px;`}
+  ${({ padding }) => `padding-bottom: ${padding.bottom}px;`}
+  ${({ padding }) => `padding-left: ${padding.left}px;`}
+  ${({ padding }) => `padding-right: ${padding.right}px;`}
   box-sizing: border-box;
 `;

web/src/beta/lib/core/StoryPanel/constants.ts

@@ -6,8 +6,10 @@ export const STORY_PANEL_CONTENT_ELEMENT_ID = "story-page-content";
 
 // Story Page
 export const DEFAULT_STORY_PAGE_DURATION = 2;
-export const DEFAULT_STORY_PAGE_GAP = 2;
-export const DEFAULT_STORY_PAGE_PADDING: Spacing = { top: 4, bottom: 4, left: 4, right: 4 };
+export const DEFAULT_STORY_PAGE_GAP = 20;
+export const DEFAULT_STORY_PAGE_PADDING: Spacing = { top: 20, bottom: 20, left: 20, right: 20 };
+export const MIN_STORY_PAGE_GAP_IN_EDITOR = 4;
+export const MIN_STORY_PAGE_PADDING_IN_EDITOR: Spacing = { top: 4, bottom: 4, left: 4, right: 4 };
 
 // Story Block
 export const TITLE_BUILTIN_STORY_BLOCK_ID = "reearth/titleStoryBlock"; // pseudo storyblock. Uninstallable. Top of each page.

web/src/beta/lib/core/StoryPanel/utils.ts

@@ -3,6 +3,8 @@ import type { Item } from "@reearth/services/api/propertyApi/utils";
 
 import type { Spacing } from "../mantle";
 
+import { MIN_STORY_PAGE_PADDING_IN_EDITOR } from "./constants";
+
 export const getFieldValue = (items: Item[], fieldId: string, fieldGroup?: string) => {
   const d = items.find(i => i.schemaGroup === (fieldGroup ?? "default")) ?? items[0];
   const isList = d && "items" in d;
@@ -24,13 +26,16 @@ export const calculatePaddingValue = (
   editorMode?: boolean,
 ) => {
   const calculateValue = (position: keyof Spacing, v?: number): { [key: string]: number } => {
-    if (!v) {
+    if (v === undefined) {
       return {
         [position]: editorMode ? defaultValue[position] : 0,
       };
     }
     return {
-      [position]: editorMode && v < defaultValue[position] ? defaultValue[position] : v,
+      [position]:
+        editorMode && v < MIN_STORY_PAGE_PADDING_IN_EDITOR[position]
+          ? MIN_STORY_PAGE_PADDING_IN_EDITOR[position]
+          : v,
     };
   };
 

web/src/services/state/index.ts

@@ -81,16 +81,24 @@ export const useCurrentCamera = () => useAtom(currentCamera);
 const widgetAlignEditor = atom<boolean | undefined>(undefined);
 export const useWidgetAlignEditorActivated = () => useAtom(widgetAlignEditor);
 
-// Selected
-const selectedWidget = atom<SelectedWidget | undefined>(undefined);
-export const useSelectedWidget = () => useAtom(selectedWidget);
-const selectedWidgetArea = atom<WidgetAreaState | undefined>(undefined);
-export const useSelectedWidgetArea = () => useAtom(selectedWidgetArea);
+// Selected - map tab
 const selectedLayer = atom<SelectedLayer | undefined>(undefined);
 export const useSelectedLayer = () => useAtom(selectedLayer);
+const selectedLayerStyle = atom<string | undefined>(undefined);
+export const useSelectedLayerStyle = () => useAtom(selectedLayerStyle);
+const selectedSceneSetting = atom<string | undefined>(undefined);
+export const useSelectedSceneSetting = () => useAtom(selectedSceneSetting);
+
+// Selected - story tab
 const selectedStoryPageId = atom<SelectedStoryPageId | undefined>(undefined);
 export const useSelectedStoryPageId = () => useAtom(selectedStoryPageId);
 
+// Selected - widget tab
+const selectedWidget = atom<SelectedWidget | undefined>(undefined);
+export const useSelectedWidget = () => useAtom(selectedWidget);
+const selectedWidgetArea = atom<WidgetAreaState | undefined>(undefined);
+export const useSelectedWidgetArea = () => useAtom(selectedWidgetArea);
+
 // Misc
 const notification = atom<Notification | undefined>(undefined);
 export const useNotification = () => useAtom(notification);