chore(web): story page update

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

@@ -0,0 +1,59 @@
+import { useState, useEffect, useMemo } from "react";
+
+import { NLSLayer } from "@reearth/services/api/layersApi/utils";
+import { Page } from "@reearth/services/api/storytellingApi/utils";
+
+type SettingProps = {
+  onPageUpdate?: (id: string, layers: string[]) => void;
+  layers?: NLSLayer[];
+  selectedPage?: Page;
+};
+export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
+  const pageId = useMemo(() => {
+    return selectedPage?.id;
+  }, [selectedPage?.id]);
+
+  const selectedLayerIds = useMemo(() => {
+    return selectedPage?.layersIds || [];
+  }, [selectedPage]);
+
+  const allLayersSelected = useMemo(() => {
+    const allLayerIds = layers?.map(layer => layer.id) || [];
+    return selectedLayerIds.length >= allLayerIds.length;
+  }, [layers, selectedLayerIds.length]);
+
+  const [checkedLayers, setCheckedLayer] = useState<string[]>(selectedLayerIds);
+  const [allCheckedLayers, setAllCheckedLayers] = useState(allLayersSelected);
+
+  useEffect(() => {
+    setCheckedLayer(selectedLayerIds);
+    setAllCheckedLayers(allLayersSelected);
+  }, [selectedLayerIds, allLayersSelected]);
+
+  const handleLayerCheck = (layerId: string) => {
+    if (!pageId) return;
+    setCheckedLayer(prev => {
+      const updatedLayers = prev.includes(layerId)
+        ? prev.filter(id => id !== layerId)
+        : [...prev, layerId];
+
+      onPageUpdate?.(pageId, updatedLayers);
+      return updatedLayers ? updatedLayers : prev;
+    });
+  };
+
+  const handleAllLayersCheck = () => {
+    if (!pageId) return;
+    const updatedCheckedLayers = allCheckedLayers ? [] : layers?.map(layer => layer.id) || [];
+    setCheckedLayer(updatedCheckedLayers);
+    setAllCheckedLayers(!allCheckedLayers);
+    onPageUpdate?.(pageId, updatedCheckedLayers);
+  };
+
+  return {
+    checkedLayers,
+    allCheckedLayers,
+    handleLayerCheck,
+    handleAllLayersCheck,
+  };
+};

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

@@ -1,24 +1,27 @@
-import { useState } from "react";
-
 import CheckBoxField from "@reearth/beta/components/CheckboxField";
 import FieldComponents from "@reearth/beta/components/fields/PropertyFields";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
 import type { FlyTo } from "@reearth/beta/lib/core/types";
 import type { Camera } from "@reearth/beta/utils/value";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import type { Item } from "@reearth/services/api/propertyApi/utils";
+import { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 import { Tab } from "../../Navbar";
 
+import useHooks from "./hooks";
+
 type Props = {
   propertyId: string;
   propertyItems?: Item[];
   currentCamera?: Camera;
   layers?: NLSLayer[];
+  selectedPage?: Page;
   tab?: Tab;
   onFlyTo?: FlyTo;
+  onPageUpdate?: (id: string, layers: string[]) => void;
 };
 
 const Settings: React.FC<Props> = ({
@@ -27,22 +30,44 @@ const Settings: React.FC<Props> = ({
   currentCamera,
   layers,
   tab,
+  selectedPage,
   onFlyTo,
+  onPageUpdate,
 }) => {
   const t = useT();
-  const [layerCheck, setLayerCheck] = useState(true);
+  const { allCheckedLayers, checkedLayers, handleAllLayersCheck, handleLayerCheck } = useHooks({
+    layers,
+    selectedPage,
+    onPageUpdate,
+  });
 
   return (
     <Wrapper>
       {tab == "story" && (
         <SidePanelSectionField title={t("Layers")}>
-          {layers?.map((layer, idx) => (
-            <Layer key={idx}>
-              <CheckBoxField onClick={setLayerCheck} checked={layerCheck} label={layer.title} />
-            </Layer>
-          ))}
+          {layers && layers?.length > 0 && (
+            <LayerWrapper>
+              <AllLayers>
+                <CheckBoxField
+                  label={t("All Layers")}
+                  onClick={handleAllLayersCheck}
+                  checked={allCheckedLayers}
+                />
+              </AllLayers>
+              {layers?.map((layer, idx) => (
+                <Layer key={idx}>
+                  <CheckBoxField
+                    onClick={() => handleLayerCheck(layer.id)}
+                    checked={checkedLayers.includes(layer.id)}
+                    label={layer.title}
+                  />
+                </Layer>
+              ))}
+            </LayerWrapper>
+          )}
         </SidePanelSectionField>
       )}
+
       {propertyItems?.map((i, idx) => (
         <SidePanelSectionField title={i.title ?? "Undefined"} key={idx}>
           <FieldComponents
@@ -71,6 +96,16 @@ const Item = styled.div`
   border-radius: 4px;
 `;
 
+const LayerWrapper = styled.div`
+  border: 1px solid ${({ theme }) => theme.outline.weak};
+  border-radius: 4px;
+`;
+
 const Layer = styled.div`
-  padding: 4px;
+  padding: 6px 4px;
+`;
+
+const AllLayers = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.outline.weak};
+  padding: 6px 4px;
 `;

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

@@ -12,6 +12,7 @@
   useStorytellingFetcher,
   usePropertyFetcher,
 } from "@reearth/services/api";
+import type { Page } from "@reearth/services/api/storytellingApi/utils";
 import { config } from "@reearth/services/config";
 import {
   useSceneMode,
@@ -31,10 +32,14 @@
   sceneId,
   isBuilt,
   storyId,
+  currentPage,
+  showStoryPanel,
 }: {
   sceneId?: string;
   isBuilt?: boolean;
   storyId?: string;
+  currentPage?: Page;
+  showStoryPanel?: boolean;
 }) => {
   const { useUpdateWidget, useUpdateWidgetAlignSystem } = useWidgetsFetcher();
   const { useGetLayersQuery } = useLayersFetcher();
@@ -87,14 +92,21 @@
     [selected],
   );
 
-  const layers = useMemo(() => processLayers(nlsLayers), [nlsLayers]);
+  const layers = useMemo(() => {
+    const processedLayers = processLayers(nlsLayers);
+    if (!showStoryPanel) return processedLayers;
+    return processedLayers?.map(layer => ({
+      ...layer,
+      visible: currentPage?.layersIds?.includes(layer.id),
+    }));
+  }, [nlsLayers, showStoryPanel, currentPage?.layersIds]);
 
   // TODO: Use GQL value
   const rootLayerId = "";
 
   const widgets = convertWidgets(scene);
   // TODO: Fix to use exact type through GQL typing
   const sceneProperty: any = useMemo(
     () => ({
       tiles: [
         {
@@ -131,7 +143,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/Visualizer/index.tsx

@@ -5,7 +5,7 @@ import type { MapRef } from "@reearth/beta/lib/core/Map/ref";
 import StoryPanel, { type InstallableStoryBlock } from "@reearth/beta/lib/core/StoryPanel";
 import CoreVisualizer, { type Props as VisualizerProps } from "@reearth/beta/lib/core/Visualizer";
 import type { Camera } from "@reearth/beta/utils/value";
-import type { Story } from "@reearth/services/api/storytellingApi/utils";
+import type { Story, Page } from "@reearth/services/api/storytellingApi/utils";
 import { config } from "@reearth/services/config";
 import { styled } from "@reearth/services/theme";
 
@@ -20,7 +20,7 @@ export type Props = {
   // storytelling
   showStoryPanel?: boolean;
   selectedStory?: Story;
-  currentPageId?: string;
+  currentPage?: Page;
   isAutoScrolling?: MutableRefObject<boolean>;
   installableBlocks?: InstallableStoryBlock[];
   onCurrentPageChange: (id: string, disableScrollIntoView?: boolean) => void;
@@ -36,7 +36,7 @@ const Visualizer: React.FC<Props> = ({
   currentCamera,
   showStoryPanel,
   selectedStory,
-  currentPageId,
+  currentPage,
   isAutoScrolling,
   installableBlocks,
   onCurrentPageChange,
@@ -76,7 +76,7 @@ const Visualizer: React.FC<Props> = ({
     handleDropLayer,
     zoomToLayer,
     handleMount,
-  } = useHooks({ sceneId, isBuilt, storyId: selectedStory?.id });
+  } = useHooks({ sceneId, isBuilt, storyId: selectedStory?.id, currentPage, showStoryPanel });
 
   const renderInfoboxInsertionPopUp = useCallback<
     NonNullable<VisualizerProps["renderInfoboxInsertionPopup"]>
@@ -133,7 +133,7 @@ const Visualizer: React.FC<Props> = ({
         {showStoryPanel && (
           <StoryPanel
             selectedStory={selectedStory}
-            currentPageId={currentPageId}
+            currentPageId={currentPage?.id}
             isAutoScrolling={isAutoScrolling}
             installableBlocks={installableBlocks}
             isEditable={!!inEditor}

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

@@ -51,6 +51,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     handlePageAdd,
     handlePageMove,
     handleStoryBlockMove: onStoryBlockMove,
+    handlePageUpdate,
   } = useStorytelling({
     sceneId,
     onFlyTo: handleFlyTo,
@@ -94,6 +95,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     currentCamera,
     showSceneSettings: selectedSceneSetting,
     onFlyTo: handleFlyTo,
+    onPageUpdate: handlePageUpdate,
   });
 
   const { secondaryNavbar } = useSecondaryNavbar({
@@ -138,7 +140,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
                 sceneId={sceneId}
                 showStoryPanel={selectedProjectType === "story"}
                 selectedStory={selectedStory}
-                currentPageId={currentPage?.id}
+                currentPage={currentPage}
                 isAutoScrolling={isAutoScrolling}
                 installableBlocks={installableStoryBlocks}
                 currentCamera={currentCamera}

web/src/beta/features/Editor/tabs/story/RightPanel/index.tsx

@@ -16,12 +16,14 @@ type Props = {
   layers?: NLSLayer[];
   tab?: Tab;
   onFlyTo?: FlyTo;
+  onPageUpdate?: (id: string, layers: string[]) => void;
 };
 
 const StoryRightPanel: React.FC<Props> = ({
   selectedPage,
   currentCamera,
   layers,
+  onPageUpdate,
   tab,
   onFlyTo,
 }) => {
@@ -48,7 +50,9 @@ const StoryRightPanel: React.FC<Props> = ({
               propertyItems={propertyItems}
               currentCamera={currentCamera}
               layers={layers}
+              selectedPage={selectedPage}
               tab={tab}
+              onPageUpdate={onPageUpdate}
               onFlyTo={onFlyTo}
             />
           ),

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

@@ -18,6 +18,7 @@ type Props = {
   showSceneSettings?: boolean;
   currentCamera?: Camera;
   onFlyTo?: FlyTo;
+  onPageUpdate?: (id: string, layers: string[]) => void;
 };
 
 export default ({
@@ -27,6 +28,7 @@ export default ({
   currentPage,
   showSceneSettings,
   currentCamera,
+  onPageUpdate,
   onFlyTo,
 }: Props) => {
   const rightPanel = useMemo<ReactNode | undefined>(() => {
@@ -48,6 +50,7 @@ export default ({
             layers={nlsLayers}
             tab={tab}
             onFlyTo={onFlyTo}
+            onPageUpdate={onPageUpdate}
           />
         );
       case "widgets":
@@ -57,7 +60,16 @@ export default ({
       default:
         return undefined;
     }
-  }, [tab, sceneId, showSceneSettings, currentCamera, onFlyTo, currentPage, nlsLayers]);
+  }, [
+    tab,
+    sceneId,
+    showSceneSettings,
+    currentCamera,
+    currentPage,
+    nlsLayers,
+    onFlyTo,
+    onPageUpdate,
+  ]);
 
   return {
     rightPanel,

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

@@ -26,6 +26,7 @@ export default function ({ sceneId, onFlyTo }: Props) {
     useDeleteStoryPage,
     useMoveStoryPage,
     useMoveStoryBlock,
+    useUpdateStoryPage,
     useInstallableStoryBlocksQuery,
   } = useStorytellingAPI();
 
@@ -138,6 +139,19 @@ export default function ({ sceneId, onFlyTo }: Props) {
     [useMoveStoryBlock, selectedStory],
   );
 
+  const handlePageUpdate = useCallback(
+    async (pageId: string, layers: string[]) => {
+      if (!selectedStory) return;
+      await useUpdateStoryPage({
+        sceneId,
+        storyId: selectedStory.id,
+        pageId,
+        layers,
+      });
+    },
+    [sceneId, selectedStory, useUpdateStoryPage],
+  );
+
   return {
     selectedStory,
     currentPage,
@@ -149,5 +163,6 @@ export default function ({ sceneId, onFlyTo }: Props) {
     handlePageAdd,
     handlePageMove,
     handleStoryBlockMove,
+    handlePageUpdate,
   };
 }

web/src/beta/lib/core/engines/Cesium/Feature/index.tsx

@@ -98,13 +98,13 @@ export default function Feature({
     const useSceneSphericalHarmonicCoefficients =
       !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
     const useSceneSpecularEnvironmentMaps = !!props.sceneProperty?.light?.specularEnvironmentMaps;
-
+    const isVisible = layer.layer.visible !== false || isHidden;
     const componentId =
       urlMD5 +
       generateIDWithMD5(
         `${layer.id}_${
           f?.id ?? ""
-        }_${k}_${isHidden}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
+        }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
           JSON.stringify(f?.[k]) ?? ""
         }`,
       );
@@ -143,7 +143,7 @@ export default function Feature({
           geometry={f?.geometry}
           feature={f}
           layer={layer}
-          isVisible={layer.layer.visible !== false && !isHidden}
+          isVisible={isVisible}
         />
       );