chore(web): hide and show layer (#735)

reearth · Oct 18, 2023 · 90e2b96 · 90e2b96
1 parent ce69e7f
commit 90e2b96
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 18 deletions.
diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
@@ -42,6 +42,7 @@ const ListItem: FC<Props> = ({
           children
         )}
       </Inner>
+
       {actionContent && (
         <Popover.Provider
           open={isOpenAction}
@@ -66,11 +67,16 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
-const Inner = styled.button<{ border?: boolean; isSelected?: boolean; clamp?: Clamp }>`
+const Inner = styled.button<{
+  border?: boolean;
+  isSelected?: boolean;
+  clamp?: Clamp;
+}>`
   display: flex;
   width: 100%;
   min-height: 38px;
   align-items: center;
+  color: ${({ theme }) => theme.content.main};
   border: 1px solid ${({ border, theme }) => (border ? theme.outline.weakest : "transparent")};
   border-radius: ${({ clamp }) =>
     clamp === "left" ? "0 6px 6px 0" : clamp === "right" ? "6px 0 0 6px" : "6px"};

diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -64,6 +64,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     handleLayerDelete,
     handleLayerSelect,
     handleLayerNameUpdate,
+    handleLayerVisibilityUpdate,
   } = useLayers({
     sceneId,
   });
@@ -83,6 +84,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     onLayerDelete: handleLayerDelete,
     onLayerSelect: handleLayerSelect,
     onLayerNameUpdate: handleLayerNameUpdate,
+    onLayerVisibilityUpate: handleLayerVisibilityUpdate,
     onSceneSettingSelect: handleSceneSettingSelect,
     onDataSourceManagerOpen: handleDataSourceManagerOpener,
     onFlyTo: handleFlyTo,

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,9 @@
 // import ListItem from "@reearth/beta/components/ListItem";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
-import type { LayerNameUpdateProps } from "@reearth/beta/features/Editor/useLayers";
+import type {
+  LayerNameUpdateProps,
+  LayerVisibilityUpdateProps,
+} 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";
@@ -17,6 +20,7 @@ type GroupSectionFieldProps = {
   onLayerSelect: (id: string) => void;
   onSceneSettingSelect: () => void;
   onDataSourceManagerOpen: () => void;
+  onLayerVisibilityUpate: (inp: LayerVisibilityUpdateProps) => void;
   onFlyTo?: FlyTo;
 };
 
@@ -29,6 +33,7 @@ const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
   onLayerSelect,
   // onSceneSettingSelect,
   onDataSourceManagerOpen,
+  onLayerVisibilityUpate,
   onFlyTo,
 }) => {
   const t = useT();
@@ -53,6 +58,7 @@ const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
           onLayerNameUpdate={onLayerNameUpdate}
           onLayerSelect={onLayerSelect}
           onDataSourceManagerOpen={onDataSourceManagerOpen}
+          onLayerVisibilityUpate={onLayerVisibilityUpate}
           onFlyTo={onFlyTo}
         />
       </StyledSidePanelSectionField>

diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx
@@ -3,28 +3,38 @@ import { MouseEvent, useCallback, useState } from "react";
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import ListItem from "@reearth/beta/components/ListItem";
 import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
-import type { LayerNameUpdateProps } from "@reearth/beta/features/Editor/useLayers";
+import type {
+  LayerNameUpdateProps,
+  LayerVisibilityUpdateProps,
+} from "@reearth/beta/features/Editor/useLayers";
+import { styled } from "@reearth/services/theme";
 
 type LayerItemProps = {
   id: string;
   layerTitle: string;
   isSelected: boolean;
+  visible: boolean;
   onDelete: () => void;
   onSelect: () => void;
   onLayerNameUpdate: (inp: LayerNameUpdateProps) => void;
+  onLayerVisibilityUpate: (inp: LayerVisibilityUpdateProps) => void;
 };
 
 const LayerItem = ({
   id,
   layerTitle,
   isSelected,
+  visible,
   onDelete,
   onSelect,
   onLayerNameUpdate,
+  onLayerVisibilityUpate,
 }: LayerItemProps) => {
   const [isActionOpen, setActionOpen] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [newValue, setNewValue] = useState(layerTitle);
+  const [isVisible, setIsVisible] = useState(visible);
+  const [value, setValue] = useState(isVisible ? "V" : "");
 
   const handleActionMenuToggle = useCallback(() => setActionOpen(prev => !prev), []);
 
@@ -59,6 +69,13 @@ const LayerItem = ({
     [layerTitle, newValue, handleTitleSubmit],
   );
 
+  const handleUpdateVisibility = useCallback(() => {
+    const newVisibility = !isVisible;
+    onLayerVisibilityUpate({ layerId: id, visible: newVisibility });
+    setIsVisible(newVisibility);
+    setValue(isVisible ? "" : "V");
+  }, [id, isVisible, onLayerVisibilityUpate]);
+
   return (
     <ListItem
       isSelected={isSelected}
@@ -91,8 +108,27 @@ const LayerItem = ({
       ) : (
         layerTitle
       )}
+      <HideLayer onClick={handleUpdateVisibility}>{value}</HideLayer>
     </ListItem>
   );
 };
 
 export default LayerItem;
+
+const HideLayer = styled.div`
+  min-width: 10px;
+  min-height: 20px;
+  padding: 3px 6px 0;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1.5px solid ${({ theme }) => theme.bg[1]};
+  color: ${({ theme }) => theme.content.strong};
+  background: ${({ theme }) => theme.bg[2]};
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  :hover {
+    background: ${({ theme }) => theme.bg[2]};
+  }
+`;
diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.stories.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.stories.tsx
@@ -1,6 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import type { LayerNameUpdateProps } from "@reearth/beta/features/Editor/useLayers";
+import type {
+  LayerNameUpdateProps,
+  LayerVisibilityUpdateProps,
+} from "@reearth/beta/features/Editor/useLayers";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
 
 import Layers from ".";
@@ -19,6 +22,7 @@ function LeftPanelLayers() {
       onLayerNameUpdate={(_inp: LayerNameUpdateProps) => {}}
       onLayerSelect={(_id: string) => {}}
       onDataSourceManagerOpen={() => {}}
+      onLayerVisibilityUpate={(_inp: LayerVisibilityUpdateProps) => {}}
     />
   );
 }

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
@@ -3,7 +3,10 @@ import { useCallback, useState } from "react";
 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 type {
+  LayerNameUpdateProps,
+  LayerVisibilityUpdateProps,
+} 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";
@@ -18,6 +21,7 @@ type LayersProps = {
   onLayerNameUpdate: (inp: LayerNameUpdateProps) => void;
   onLayerSelect: (id: string) => void;
   onDataSourceManagerOpen: () => void;
+  onLayerVisibilityUpate: (inp: LayerVisibilityUpdateProps) => void;
   onFlyTo?: FlyTo;
 };
 
@@ -28,6 +32,7 @@ const Layers: React.FC<LayersProps> = ({
   onLayerNameUpdate,
   onLayerSelect,
   onDataSourceManagerOpen,
+  onLayerVisibilityUpate,
   onFlyTo,
 }) => {
   const t = useT();
@@ -87,10 +92,12 @@ const Layers: React.FC<LayersProps> = ({
           key={layer.id}
           id={layer.id}
           layerTitle={layer.title}
+          visible={layer.visible}
           isSelected={layer.id === selectedLayerId}
           onDelete={() => onLayerDelete(layer.id)}
           onSelect={() => onLayerSelect(layer.id)}
           onLayerNameUpdate={onLayerNameUpdate}
+          onLayerVisibilityUpate={onLayerVisibilityUpate}
         />
       ))}
     </LayerContainer>

diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/index.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/index.tsx
@@ -4,7 +4,7 @@ import { FlyTo } from "@reearth/beta/lib/core/types";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 
-import type { LayerNameUpdateProps } from "../../../useLayers";
+import type { LayerNameUpdateProps, LayerVisibilityUpdateProps } from "../../../useLayers";
 
 type Props = {
   layers: NLSLayer[];
@@ -15,6 +15,7 @@ type Props = {
   onLayerSelect: (id: string) => void;
   onSceneSettingSelect: () => void;
   onDataSourceManagerOpen: () => void;
+  onLayerVisibilityUpate: (inp: LayerVisibilityUpdateProps) => void;
   onFlyTo?: FlyTo;
 };
 
@@ -27,6 +28,7 @@ const MapSidePanel: React.FC<Props> = ({
   onLayerNameUpdate,
   onSceneSettingSelect,
   onDataSourceManagerOpen,
+  onLayerVisibilityUpate,
   onFlyTo,
 }) => {
   const t = useT();
@@ -48,6 +50,7 @@ const MapSidePanel: React.FC<Props> = ({
               onLayerSelect={onLayerSelect}
               onSceneSettingSelect={onSceneSettingSelect}
               onDataSourceManagerOpen={onDataSourceManagerOpen}
+              onLayerVisibilityUpate={onLayerVisibilityUpate}
               onFlyTo={onFlyTo}
             />
           ),

diff --git a/web/src/beta/features/Editor/useLayers.ts b/web/src/beta/features/Editor/useLayers.ts
@@ -21,6 +21,11 @@ export type LayerNameUpdateProps = {
   name: string;
 };
 
+export type LayerVisibilityUpdateProps = {
+  layerId: string;
+  visible: boolean;
+};
+
 export default function ({ sceneId }: useLayerProps) {
   const t = useT();
   const { useGetLayersQuery, useAddNLSLayerSimple, useRemoveNLSLayer, useUpdateNLSLayer } =
@@ -79,12 +84,23 @@ export default function ({ sceneId }: useLayerProps) {
     [useUpdateNLSLayer],
   );
 
+  const handleLayerVisibilityUpdate = useCallback(
+    async (inp: LayerVisibilityUpdateProps) => {
+      await useUpdateNLSLayer({
+        layerId: inp.layerId,
+        visible: inp.visible,
+      });
+    },
+    [useUpdateNLSLayer],
+  );
+
   return {
     nlsLayers,
     selectedLayer,
     handleLayerAdd,
     handleLayerDelete,
     handleLayerSelect,
     handleLayerNameUpdate,
+    handleLayerVisibilityUpdate,
   };
 }
diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx
@@ -7,7 +7,7 @@ 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";
 
-import type { LayerNameUpdateProps } from "./useLayers";
+import type { LayerNameUpdateProps, LayerVisibilityUpdateProps } from "./useLayers";
 
 type Props = {
   tab: Tab;
@@ -30,6 +30,7 @@ type Props = {
   selectedLayerId?: string;
   onLayerDelete: (id: string) => void;
   onLayerNameUpdate: (inp: LayerNameUpdateProps) => void;
+  onLayerVisibilityUpate: (inp: LayerVisibilityUpdateProps) => void;
   onLayerSelect: (id: string) => void;
   onDataSourceManagerOpen: () => void;
   onFlyTo?: FlyTo;
@@ -52,6 +53,7 @@ export default ({
   onLayerSelect,
   onSceneSettingSelect,
   onDataSourceManagerOpen,
+  onLayerVisibilityUpate,
   onFlyTo,
 }: Props) => {
   const leftPanel = useMemo<ReactNode | undefined>(() => {
@@ -64,6 +66,7 @@ export default ({
             selectedSceneSetting={selectedSceneSetting}
             onLayerDelete={onLayerDelete}
             onLayerNameUpdate={onLayerNameUpdate}
+            onLayerVisibilityUpate={onLayerVisibilityUpate}
             onLayerSelect={onLayerSelect}
             onSceneSettingSelect={onSceneSettingSelect}
             onDataSourceManagerOpen={onDataSourceManagerOpen}
@@ -94,6 +97,7 @@ export default ({
     selectedSceneSetting,
     onLayerDelete,
     onLayerNameUpdate,
+    onLayerVisibilityUpate,
     onLayerSelect,
     onSceneSettingSelect,
     onDataSourceManagerOpen,

diff --git a/web/src/beta/lib/core/Map/Layers/index.test.tsx b/web/src/beta/lib/core/Map/Layers/index.test.tsx
@@ -74,7 +74,7 @@ test("tree", () => {
       id: "a",
       type: "group",
       children: [
-        { id: "b", type: "simple" },
+        { id: "b", type: "simple", visible: true },
         { id: "c", type: "group", children: [] },
       ],
     },
@@ -85,7 +85,7 @@ test("tree", () => {
   expect(Feature.mock.calls[0][0].layer).toEqual({
     id: "b",
     features: [],
-    layer: { id: "b", type: "simple" },
+    layer: { id: "b", type: "simple", visible: true },
     status: "ready",
     originalFeatures: [],
   });
@@ -107,7 +107,7 @@ test("ref", async () => {
         ref.current?.replace({ id: layerId.current, type: "simple", title: "A" });
         ss(ref.current?.findById(layerId.current)?.title ?? "");
       } else {
-        const newLayer = ref.current?.add({ type: "simple", title: "a" });
+        const newLayer = ref.current?.add({ type: "simple", title: "a", visible: true });
         layerId.current = newLayer?.id ?? "";
         ss(newLayer?.title ?? "");
       }
@@ -121,7 +121,6 @@ test("ref", async () => {
     );
   }
 
-  // add should add layers and getLayer should return a lazy layer
   const { rerender } = render(<Comp />);
 
   await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("a"));
@@ -130,17 +129,15 @@ test("ref", async () => {
   expect(Feature.mock.calls[0][0].layer).toEqual({
     id: expect.any(String),
     features: [],
-    layer: { id: expect.any(String), type: "simple", title: "a" },
+    layer: { id: expect.any(String), type: "simple", title: "a", visible: true },
     status: "ready",
     originalFeatures: [],
   });
 
-  // update should update the layer
   rerender(<Comp replace />);
 
   await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("A"));
 
-  // deleteLayer should delete the layer and getLayer should return nothing
   rerender(<Comp del />);
 
   await waitFor(() => expect(screen.getByTestId("layer")).toBeEmptyDOMElement());
@@ -151,6 +148,7 @@ test("computed", async () => {
     {
       id: "x",
       type: "simple",
+      visible: true,
       data: {
         type: "geojson",
         value: {

diff --git a/web/src/beta/lib/core/Map/hooks.ts b/web/src/beta/lib/core/Map/hooks.ts
@@ -80,7 +80,6 @@ export default function ({
       reason?: LayerSelectionReason,
       info?: SelectedFeatureInfo,
     ) => {
-      console.log("handleLayerSelect");
       selectLayer({ layerId, featureId, layer: await layer?.(), reason, info });
     },
     [],