chore(web): fly to layers (#739)

reearth · Oct 18, 2023 · ce69e7f · ce69e7f
1 parent 6c8a42f
commit ce69e7f
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 34 deletions.
diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -20,9 +20,9 @@ import {
   useSelected,
   useSelectedBlock,
   useWidgetAlignEditorActivated,
-  useZoomedLayerId,
   selectedWidgetAreaVar,
   isVisualizerReadyVar,
+  useZoomedLayerId,
 } from "@reearth/services/state";
 
 import { convertStory, convertWidgets, processLayers } from "./convert";
@@ -261,7 +261,6 @@ export default ({
     sceneId,
     rootLayerId,
     selectedLayerId,
-    zoomedLayerId,
     selectedBlockId: selectedBlock,
     sceneProperty,
     pluginProperty,
@@ -280,6 +279,7 @@ export default ({
     useExperimentalSandbox,
     isVisualizerReady,
     selectWidgetArea: selectedWidgetAreaVar,
+    zoomedLayerId,
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handlePropertyValueUpdate,
@@ -293,7 +293,7 @@ export default ({
     onWidgetAlignSystemUpdate,
     onIsCapturingChange,
     handleDropLayer,
-    zoomToLayer,
     handleMount,
+    zoomToLayer,
   };
 };
diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx
@@ -46,7 +46,6 @@ const Visualizer: React.FC<Props> = ({
   const {
     rootLayerId,
     selectedBlockId,
-    zoomedLayerId,
     sceneProperty,
     pluginProperty,
     clusters,
@@ -62,6 +61,7 @@ const Visualizer: React.FC<Props> = ({
     layerSelectionReason,
     useExperimentalSandbox,
     isVisualizerReady: _isVisualizerReady,
+    zoomedLayerId,
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handlePropertyValueUpdate,
@@ -75,8 +75,8 @@ const Visualizer: React.FC<Props> = ({
     onWidgetAlignSystemUpdate,
     selectWidgetArea,
     handleDropLayer,
-    zoomToLayer,
     handleMount,
+    zoomToLayer,
   } = useHooks({ sceneId, isBuilt, storyId: selectedStory?.id, currentPage, showStoryPanel });
 
   const renderInfoboxInsertionPopUp = useCallback<

diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -85,6 +85,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     onLayerNameUpdate: handleLayerNameUpdate,
     onSceneSettingSelect: handleSceneSettingSelect,
     onDataSourceManagerOpen: handleDataSourceManagerOpener,
+    onFlyTo: handleFlyTo,
   });
 
   const { rightPanel } = useRightPanel({

diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/GroupField/index.tsx
@@ -1,6 +1,7 @@
 // import ListItem from "@reearth/beta/components/ListItem";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
 import type { LayerNameUpdateProps } from "@reearth/beta/features/Editor/useLayers";
+import { FlyTo } from "@reearth/beta/lib/core/types";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -16,6 +17,7 @@ type GroupSectionFieldProps = {
   onLayerSelect: (id: string) => void;
   onSceneSettingSelect: () => void;
   onDataSourceManagerOpen: () => void;
+  onFlyTo?: FlyTo;
 };
 
 const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
@@ -27,6 +29,7 @@ const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
   onLayerSelect,
   // onSceneSettingSelect,
   onDataSourceManagerOpen,
+  onFlyTo,
 }) => {
   const t = useT();
 
@@ -50,6 +53,7 @@ const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
           onLayerNameUpdate={onLayerNameUpdate}
           onLayerSelect={onLayerSelect}
           onDataSourceManagerOpen={onDataSourceManagerOpen}
+          onFlyTo={onFlyTo}
         />
       </StyledSidePanelSectionField>
     </>

diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.tsx
@@ -4,6 +4,7 @@ import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import type { LayerNameUpdateProps } from "@reearth/beta/features/Editor/useLayers";
+import { FlyTo } from "@reearth/beta/lib/core/types";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -17,6 +18,7 @@ type LayersProps = {
   onLayerNameUpdate: (inp: LayerNameUpdateProps) => void;
   onLayerSelect: (id: string) => void;
   onDataSourceManagerOpen: () => void;
+  onFlyTo?: FlyTo;
 };
 
 const Layers: React.FC<LayersProps> = ({
@@ -26,6 +28,7 @@ const Layers: React.FC<LayersProps> = ({
   onLayerNameUpdate,
   onLayerSelect,
   onDataSourceManagerOpen,
+  onFlyTo,
 }) => {
   const t = useT();
   const [isAddMenuOpen, setAddMenuOpen] = useState(false);
@@ -34,36 +37,51 @@ const Layers: React.FC<LayersProps> = ({
     setAddMenuOpen(prev => !prev);
   }, []);
 
+  const handleZoomToLayer = () => {
+    if (selectedLayerId) {
+      onFlyTo?.(selectedLayerId);
+    }
+  };
+
   return (
     <LayerContainer>
-      <Popover.Provider open={isAddMenuOpen} onOpenChange={toggleAddMenu} placement="bottom-end">
-        <Popover.Trigger asChild>
-          <AddLayerIcon onClick={toggleAddMenu}>
-            <Icon icon="addLayer" />
-          </AddLayerIcon>
-        </Popover.Trigger>
+      <ActionWrapper>
+        <StyledIcon
+          onClick={handleZoomToLayer}
+          icon="zoomToLayer"
+          size={16}
+          disabled={!selectedLayerId}
+        />
+        <Popover.Provider open={isAddMenuOpen} onOpenChange={toggleAddMenu} placement="bottom-end">
+          <Popover.Trigger asChild>
+            <AddLayerIcon onClick={toggleAddMenu}>
+              <Icon icon="addLayer" />
+            </AddLayerIcon>
+          </Popover.Trigger>
 
-        <Popover.Content>
-          <PopoverMenuContent
-            size="md"
-            items={[
-              {
-                name: t("Add Layer from Resource"),
-                icon: "file",
-                onClick: () => {
-                  onDataSourceManagerOpen();
-                  toggleAddMenu();
+          <Popover.Content>
+            <PopoverMenuContent
+              size="md"
+              items={[
+                {
+                  name: t("Add Layer from Resource"),
+                  icon: "file",
+                  onClick: () => {
+                    onDataSourceManagerOpen();
+                    toggleAddMenu();
+                  },
                 },
-              },
-              // {
-              //   name: t("Add Sketch Layer"),
-              //   icon: "pencilSimple",
-              //   onClick: () => {},
-              // },
-            ]}
-          />
-        </Popover.Content>
-      </Popover.Provider>
+                // {
+                //   name: t("Add Sketch Layer"),
+                //   icon: "pencilSimple",
+                //   onClick: () => {},
+                // },
+              ]}
+            />
+          </Popover.Content>
+        </Popover.Provider>
+      </ActionWrapper>
+
       {layers.map(layer => (
         <LayerItem
           key={layer.id}
@@ -84,11 +102,22 @@ const LayerContainer = styled.div`
   flex-direction: column;
 `;
 
+const ActionWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: right;
+`;
+
 const AddLayerIcon = styled.div`
   padding: 2px;
   margin-bottom: 2px;
   align-self: flex-end;
   cursor: pointer;
 `;
-
+const StyledIcon = styled(Icon)<{ disabled?: boolean }>`
+  padding: 3px;
+  cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
+  color: ${({ disabled, theme }) => (disabled ? theme.content.weak : theme.content.strong)};
+  border-radius: 5px;
+`;
 export default Layers;
diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/index.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/index.tsx
@@ -1,5 +1,6 @@
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
 import GroupSectionField from "@reearth/beta/features/Editor/tabs/map/LeftPanel/GroupField";
+import { FlyTo } from "@reearth/beta/lib/core/types";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 
@@ -14,6 +15,7 @@ type Props = {
   onLayerSelect: (id: string) => void;
   onSceneSettingSelect: () => void;
   onDataSourceManagerOpen: () => void;
+  onFlyTo?: FlyTo;
 };
 
 const MapSidePanel: React.FC<Props> = ({
@@ -25,6 +27,7 @@ const MapSidePanel: React.FC<Props> = ({
   onLayerNameUpdate,
   onSceneSettingSelect,
   onDataSourceManagerOpen,
+  onFlyTo,
 }) => {
   const t = useT();
 
@@ -45,6 +48,7 @@ const MapSidePanel: React.FC<Props> = ({
               onLayerSelect={onLayerSelect}
               onSceneSettingSelect={onSceneSettingSelect}
               onDataSourceManagerOpen={onDataSourceManagerOpen}
+              onFlyTo={onFlyTo}
             />
           ),
         },

diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx
@@ -3,6 +3,7 @@ import { ReactNode, useMemo } from "react";
 import MapSidePanel from "@reearth/beta/features/Editor/tabs/map/LeftPanel";
 import StorySidePanel from "@reearth/beta/features/Editor/tabs/story/LeftPanel";
 import { Tab } from "@reearth/beta/features/Navbar";
+import { FlyTo } from "@reearth/beta/lib/core/types";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import type { Story } from "@reearth/services/api/storytellingApi/utils";
 
@@ -31,6 +32,7 @@ type Props = {
   onLayerNameUpdate: (inp: LayerNameUpdateProps) => void;
   onLayerSelect: (id: string) => void;
   onDataSourceManagerOpen: () => void;
+  onFlyTo?: FlyTo;
 };
 
 export default ({
@@ -50,6 +52,7 @@ export default ({
   onLayerSelect,
   onSceneSettingSelect,
   onDataSourceManagerOpen,
+  onFlyTo,
 }: Props) => {
   const leftPanel = useMemo<ReactNode | undefined>(() => {
     switch (tab) {
@@ -64,6 +67,7 @@ export default ({
             onLayerSelect={onLayerSelect}
             onSceneSettingSelect={onSceneSettingSelect}
             onDataSourceManagerOpen={onDataSourceManagerOpen}
+            onFlyTo={onFlyTo}
           />
         );
       case "story":
@@ -86,15 +90,16 @@ export default ({
   }, [
     tab,
     nlsLayers,
-    selectedStory,
     selectedLayerId,
     selectedSceneSetting,
-    currentPageId,
     onLayerDelete,
     onLayerNameUpdate,
     onLayerSelect,
     onSceneSettingSelect,
     onDataSourceManagerOpen,
+    onFlyTo,
+    selectedStory,
+    currentPageId,
     onCurrentPageChange,
     onPageDuplicate,
     onPageDelete,