chore(web): refactor layer selection (#989)

web/package.json

@@ -114,7 +114,7 @@
         "@monaco-editor/react": "4.6.0",
         "@popperjs/core": "2.11.8",
         "@reearth/cesium-mvt-imagery-provider": "1.5.4",
-        "@reearth/core": "0.0.6",
+        "@reearth/core": "0.0.7-beta.0",
         "@rot1024/use-transition": "1.0.0",
         "@sentry/browser": "7.77.0",
         "@seznam/compose-react-refs": "1.0.6",

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

@@ -1,7 +1,7 @@
 import { useMemo, useEffect, useCallback, useState } from "react";
 
 import type { Alignment, Location } from "@reearth/beta/features/Visualizer/Crust";
-import type { LayerSelectionReason, LatLng, ComputedLayer, ComputedFeature } from "@reearth/core";
+import type { LatLng, ComputedLayer, ComputedFeature } from "@reearth/core";
 import {
   useLayersFetcher,
   useSceneFetcher,
@@ -13,7 +13,7 @@ import {
 } from "@reearth/services/api";
 import { config } from "@reearth/services/config";
 
-import type { SelectedLayer } from "../useLayers";
+import type { LayerSelectProps, SelectedLayer } from "../useLayers";
 
 import { convertWidgets, processLayers, processProperty } from "./convert";
 import { convertStory } from "./convert-story";
@@ -24,19 +24,21 @@ export default ({
   isBuilt,
   showStoryPanel,
   selectedLayer,
-  setSelectedLayer,
-  setSelectedLayerStyle,
-  setSelectedSceneSetting,
+  onCoreLayerSelect,
+  onLayerStyleSelect,
+  onSceneSettingSelect,
+  onVisualizerReady,
   setSelectedStoryPageId,
 }: {
   sceneId?: string;
   storyId?: string;
   isBuilt?: boolean;
   showStoryPanel?: boolean;
   selectedLayer?: SelectedLayer | undefined;
-  setSelectedLayer: (value: SelectedLayer | undefined) => void;
-  setSelectedLayerStyle: (value: string | undefined) => void;
-  setSelectedSceneSetting: (value: string | undefined) => void;
+  onCoreLayerSelect: (props: LayerSelectProps) => void;
+  onLayerStyleSelect: (layerStyleId?: string) => void;
+  onSceneSettingSelect: (collection?: string) => void;
+  onVisualizerReady: (value: boolean) => void;
   setSelectedStoryPageId: (value: string | undefined) => void;
 }) => {
   const { useUpdateWidget, useUpdateWidgetAlignSystem } = useWidgetsFetcher();
@@ -84,24 +86,23 @@ export default ({
     }));
   }, [nlsLayers, layerStyles, infoboxBlockNames, showStoryPanel]);
 
-  const handleLayerSelect = useCallback(
-    async (
-      id?: string,
-      layer?: () => Promise<ComputedLayer | undefined>,
-      feature?: ComputedFeature,
-      layerSelectionReason?: LayerSelectionReason,
-    ) => {
-      if ((!id && !feature && !selectedLayer) ?? (id === selectedLayer?.layerId || !feature))
+  const handleCoreLayerSelect = useCallback(
+    (layerId?: string, computedLayer?: ComputedLayer, computedFeature?: ComputedFeature) => {
+      if (
+        (!layerId && !computedFeature && !selectedLayer) ??
+        (layerId === selectedLayer?.layer?.id || !computedFeature)
+      )
         return;
-      if (id) {
-        setSelectedLayerStyle(undefined);
-        setSelectedSceneSetting(undefined);
+
+      if (layerId) {
+        onLayerStyleSelect(undefined);
+        onSceneSettingSelect(undefined);
+        onCoreLayerSelect({ layerId, computedLayer, computedFeature });
+      } else {
+        onCoreLayerSelect(undefined);
       }
-      setSelectedLayer(
-        id ? { layerId: id, layer: await layer?.(), feature, layerSelectionReason } : undefined,
-      );
     },
-    [selectedLayer, setSelectedLayer, setSelectedLayerStyle, setSelectedSceneSetting],
+    [selectedLayer, onCoreLayerSelect, onLayerStyleSelect, onSceneSettingSelect],
   );
 
   const handleLayerDrop = useCallback(
@@ -144,9 +145,9 @@ export default ({
 
   const handleInfoboxBlockCreate = useCallback(
     async (pluginId: string, extensionId: string, index?: number) => {
-      if (!selectedLayer) return;
+      if (!selectedLayer?.layer?.id) return;
       await useCreateInfoboxBlock({
-        layerId: selectedLayer.layerId,
+        layerId: selectedLayer.layer.id,
         pluginId,
         extensionId,
         index,
@@ -157,9 +158,9 @@ export default ({
 
   const handleInfoboxBlockMove = useCallback(
     async (id: string, targetIndex: number) => {
-      if (!selectedLayer) return;
+      if (!selectedLayer?.layer?.id) return;
       await useMoveInfoboxBlock({
-        layerId: selectedLayer.layerId,
+        layerId: selectedLayer.layer.id,
         infoboxBlockId: id,
         index: targetIndex,
       });
@@ -169,9 +170,9 @@ export default ({
 
   const handleInfoboxBlockRemove = useCallback(
     async (id?: string) => {
-      if (!selectedLayer || !id) return;
+      if (!selectedLayer?.layer?.id || !id) return;
       await useDeleteInfoboxBlock({
-        layerId: selectedLayer.layerId,
+        layerId: selectedLayer.layer.id,
         infoboxBlockId: id,
       });
     },
@@ -261,6 +262,8 @@ export default ({
     document.title = title;
   }, [isBuilt, title]);
 
+  const handleMount = useCallback(() => onVisualizerReady(true), [onVisualizerReady]);
+
   return {
     sceneProperty,
     pluginProperty,
@@ -270,7 +273,7 @@ export default ({
     engineMeta,
     zoomedLayerId,
     installableInfoboxBlocks,
-    handleLayerSelect,
+    handleCoreLayerSelect,
     handleLayerDrop,
     handleStoryPageChange,
     handleStoryBlockCreate,
@@ -284,6 +287,7 @@ export default ({
     handlePropertyItemAdd,
     handlePropertyItemDelete,
     handlePropertyItemMove,
+    handleMount,
     zoomToLayer,
   };
 };

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

@@ -1,4 +1,4 @@
-import { MutableRefObject, SetStateAction, useCallback } from "react";
+import { MutableRefObject, SetStateAction } from "react";
 
 import Visualizer from "@reearth/beta/features/Visualizer";
 import { type InteractionModeType } from "@reearth/beta/features/Visualizer/Crust";
@@ -12,7 +12,7 @@ import type { MapRef } from "@reearth/core";
 import type { Story } from "@reearth/services/api/storytellingApi/utils";
 import { WidgetAreaState } from "@reearth/services/state";
 
-import type { SelectedLayer } from "../useLayers";
+import type { LayerSelectProps, SelectedLayer } from "../useLayers";
 
 import useHooks from "./hooks";
 
@@ -35,10 +35,10 @@ export type Props = {
   onCameraChange: (camera: Camera) => void;
   onSketchTypeChange?: (type: SketchType | undefined) => void;
   onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
-  setIsVisualizerReady: (value: boolean) => void;
-  setSelectedLayer: (value: SelectedLayer | undefined) => void;
-  setSelectedLayerStyle: (value: string | undefined) => void;
-  setSelectedSceneSetting: (value: string | undefined) => void;
+  onVisualizerReady: (value: boolean) => void;
+  onCoreLayerSelect: (props: LayerSelectProps) => void;
+  onLayerStyleSelect: (layerStyleId?: string) => void;
+  onSceneSettingSelect: (collection?: string) => void;
   setSelectedStoryPageId: (value: string | undefined) => void;
   selectWidgetArea: (update?: SetStateAction<WidgetAreaState | undefined>) => void;
 };
@@ -61,10 +61,10 @@ const EditorVisualizer: React.FC<Props> = ({
   onCameraChange,
   onSketchTypeChange,
   onSketchFeatureCreate,
-  setIsVisualizerReady,
-  setSelectedLayer,
-  setSelectedLayerStyle,
-  setSelectedSceneSetting,
+  onVisualizerReady,
+  onCoreLayerSelect,
+  onLayerStyleSelect,
+  onSceneSettingSelect,
   setSelectedStoryPageId,
   selectWidgetArea,
 }) => {
@@ -77,7 +77,7 @@ const EditorVisualizer: React.FC<Props> = ({
     engineMeta,
     zoomedLayerId,
     installableInfoboxBlocks,
-    handleLayerSelect,
+    handleCoreLayerSelect,
     handleLayerDrop,
     handleStoryPageChange,
     handleStoryBlockCreate,
@@ -91,21 +91,21 @@ const EditorVisualizer: React.FC<Props> = ({
     handlePropertyItemAdd,
     handlePropertyItemDelete,
     handlePropertyItemMove,
+    handleMount,
     zoomToLayer,
   } = useHooks({
     sceneId,
     isBuilt,
     storyId: selectedStory?.id,
     showStoryPanel,
     selectedLayer,
-    setSelectedLayer,
-    setSelectedLayerStyle,
-    setSelectedSceneSetting,
+    onCoreLayerSelect,
+    onLayerStyleSelect,
+    onSceneSettingSelect,
+    onVisualizerReady,
     setSelectedStoryPageId,
   });
 
-  const handleMount = useCallback(() => setIsVisualizerReady(true), [setIsVisualizerReady]);
-
   return (
     <Visualizer
       engine="cesium"
@@ -124,7 +124,7 @@ const EditorVisualizer: React.FC<Props> = ({
       currentCamera={currentCamera}
       interactionMode={interactionMode}
       onCameraChange={onCameraChange}
-      handleLayerSelect={handleLayerSelect}
+      onCoreLayerSelect={handleCoreLayerSelect}
       handleLayerDrop={handleLayerDrop}
       handleZoomToLayer={zoomToLayer}
       handleSketchTypeChange={onSketchTypeChange}

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

@@ -1,5 +1,3 @@
-import { useCallback } from "react";
-
 import Resizable from "@reearth/beta/components/Resizable";
 import useBottomPanel from "@reearth/beta/features/Editor/useBottomPanel";
 import useLeftPanel from "@reearth/beta/features/Editor/useLeftPanel";
@@ -18,6 +16,7 @@ import useLayers from "./useLayers";
 import useLayerStyles from "./useLayerStyles";
 import useScene from "./useScene";
 import useSketch from "./useSketch";
+import { useUISelection } from "./useUISelection";
 
 type Props = {
   sceneId: string;
@@ -81,14 +80,14 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
   const {
     nlsLayers,
     selectedLayer,
-    selectedLayerId,
+    ignoreCoreLayerUnselect,
     handleLayerAdd,
     handleLayerDelete,
     handleLayerSelect,
     handleLayerNameUpdate,
     handleLayerConfigUpdate,
     handleLayerVisibilityUpdate,
-    setSelectedLayerId,
+    handleCoreLayerSelect,
   } = useLayers({
     sceneId,
     isVisualizerReady,
@@ -102,48 +101,27 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
   const {
     layerStyles,
     selectedLayerStyle,
-    setSelectedLayerStyleId,
     handleLayerStyleAdd,
     handleLayerStyleDelete,
     handleLayerStyleNameUpdate,
     handleLayerStyleValueUpdate,
     handleLayerStyleSelect,
   } = useLayerStyles({ sceneId });
 
-  // State handling for editor UI
-  const handleLayerStyleSelected = useCallback(
-    (layerStyleId: string) => {
-      handleLayerSelect(undefined);
-      handleSceneSettingSelect(undefined);
-      handleLayerStyleSelect(layerStyleId);
-    },
-    [handleLayerStyleSelect, handleSceneSettingSelect, handleLayerSelect],
-  );
-
-  const handleLayerSelected = useCallback(
-    (layerId: string) => {
-      setSelectedLayerStyleId(undefined);
-      handleSceneSettingSelect(undefined);
-      handleLayerSelect(layerId);
-    },
-    [handleLayerSelect, handleSceneSettingSelect, setSelectedLayerStyleId],
-  );
-
-  const handleSceneSettingSelected = useCallback(
-    (collection?: string) => {
-      setSelectedLayerStyleId(undefined);
-      handleLayerSelect(undefined);
-      handleSceneSettingSelect(collection);
-    },
-    [handleLayerSelect, handleSceneSettingSelect, setSelectedLayerStyleId],
-  );
+  // TODO: manage panel item selection
+  const { handleLayerSelected, handleLayerStyleSelected, handleSceneSettingSelected } =
+    useUISelection({
+      handleLayerSelect,
+      handleLayerStyleSelect,
+      handleSceneSettingSelect,
+    });
 
   const { leftPanel } = useLeftPanel({
     tab,
     scene,
     nlsLayers,
     selectedStory,
-    selectedLayerId: selectedLayer?.id,
+    selectedLayerId: selectedLayer?.layer?.id,
     currentPageId: currentPage?.id,
     selectedSceneSetting,
     onCurrentPageChange: handleCurrentPageChange,
@@ -170,9 +148,9 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
   } = useSketch({
     tab,
     nlsLayers,
-    selectedLayer,
+    selectedLayer: selectedLayer?.layer,
+    ignoreCoreLayerUnselect,
     visualizerRef,
-    handleLayerConfigUpdate,
   });
 
   const { rightPanel } = useRightPanel({
@@ -186,7 +164,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     selectedLayerStyleId: selectedLayerStyle?.id,
     selectedSceneSetting: selectedSceneSetting,
     sceneSettings: sceneSettings,
-    selectedLayerId: selectedLayerId,
+    selectedLayer,
     selectedWidget: selectedWidget,
     selectedWidgetArea: selectedWidgetArea,
     onFlyTo: handleFlyTo,
@@ -216,7 +194,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     selectedProjectType,
     showWidgetEditor,
     sketchType,
-    isSketchLayerSelected: !!selectedLayer?.isSketch,
+    isSketchLayerSelected: !!selectedLayer?.layer?.isSketch,
     handleSketchTypeChange,
     handleProjectTypeChange,
     handleDeviceChange,
@@ -253,7 +231,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
                 visualizerWidth={visualizerWidth}>
                 <EditorVisualizer
                   inEditor={tab !== "publish"}
-                  selectedLayer={selectedLayerId}
+                  selectedLayer={selectedLayer}
                   visualizerRef={visualizerRef}
                   storyPanelRef={storyPanelRef}
                   sceneId={sceneId}
@@ -267,10 +245,10 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
                   onCameraChange={handleCameraUpdate}
                   onSketchTypeChange={handleSketchTypeChange}
                   onSketchFeatureCreate={handleSketchFeatureCreate}
-                  setIsVisualizerReady={handleIsVisualizerUpdate}
-                  setSelectedLayer={setSelectedLayerId}
-                  setSelectedLayerStyle={setSelectedLayerStyleId}
-                  setSelectedSceneSetting={handleSceneSettingSelect}
+                  onLayerStyleSelect={handleLayerStyleSelect}
+                  onSceneSettingSelect={handleSceneSettingSelect}
+                  onVisualizerReady={handleIsVisualizerUpdate}
+                  onCoreLayerSelect={handleCoreLayerSelect}
                   setSelectedStoryPageId={setSelectedStoryPageId}
                   selectWidgetArea={selectWidgetArea}
                 />