chore(web): show scene settings (#688)

reearth · Sep 13, 2023 · 884b763 · 884b763
1 parent a364159
commit 884b763
Show file tree

Hide file tree

Showing 16 changed files with 116 additions and 77 deletions.
diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
@@ -25,7 +25,7 @@ export const Default: Story = (args: Props) => {
         <Slider {...args} onChange={handleChange} />
       </div>
       <div>
-        <Slider {...args} max={2 * args.max} onChange={handleChange} />
+        <Slider {...args} max={args.max ? 2 * args.max : undefined} onChange={handleChange} />
       </div>
       <div>
         <Slider {...args} disabled={true} onChange={handleChange} />

diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
@@ -8,8 +8,8 @@ import "rc-slider/assets/index.css";
 const SliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider);
 
 export type Props = {
-  min: number;
-  max: number;
+  min?: number;
+  max?: number;
 } & Omit<ComponentProps<typeof SliderWithTooltip>, "defaultValue">;
 
 const Slider: React.FC<Props> = ({ ...props }) => (

diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -27,14 +27,21 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
         const isList = item && "items" in item;
         const value = !isList ? item.fields.find(f => f.id === sf.id)?.value : sf.defaultValue;
 
+        const handleChange = handlePropertyValueUpdate(
+          item.schemaGroup,
+          propertyId,
+          sf.id,
+          sf.type,
+        );
+
         return sf.type === "string" ? (
           sf.ui === "color" ? (
             <ColorField
               key={sf.id}
               name={sf.name}
               value={(value as string) ?? ""}
               description={sf.description}
-              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+              onChange={handleChange}
             />
           ) : sf.ui === "selection" || sf.choices ? (
             <SelectField
@@ -43,7 +50,7 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
               value={(value as string) ?? ""}
               description={sf.description}
               options={sf.choices}
-              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+              onChange={handleChange}
             />
           ) : sf.ui === "buttons" ? (
             <p key={sf.id}>Button radio field</p>
@@ -53,7 +60,7 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
               name={sf.name}
               value={(value as string) ?? ""}
               description={sf.description}
-              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+              onChange={handleChange}
             />
           )
         ) : sf.type === "spacing" ? (
@@ -64,37 +71,37 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
             description={sf.description}
             min={sf.min}
             max={sf.max}
-            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            onChange={handleChange}
           />
         ) : sf.type === "bool" ? (
           <ToggleField
             key={sf.id}
             name={sf.name}
             checked={value as boolean}
             description={sf.description}
-            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            onChange={handleChange}
           />
         ) : sf.type === "number" ? (
           sf.ui === "slider" ? (
             <SliderField
               key={sf.id}
               name={sf.name}
               value={value as number}
-              min={sf.min as number}
-              max={sf.max as number}
+              min={sf.min}
+              max={sf.max}
               description={sf.description}
-              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+              onChange={handleChange}
             />
           ) : (
             <NumberField
               key={sf.id}
               name={sf.name}
               value={value as number}
               suffix={sf.suffix}
-              min={sf.min as number}
-              max={sf.max as number}
+              min={sf.min}
+              max={sf.max}
               description={sf.description}
-              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+              onChange={handleChange}
             />
           )
         ) : sf.type === "latlng" ? (
@@ -103,15 +110,15 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
             name={sf.name}
             value={value as LatLng}
             description={sf.description}
-            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            onChange={handleChange}
           />
         ) : sf.type === "camera" ? (
           <CameraField
             key={sf.id}
             name={sf.name}
             value={value as CameraValue}
             description={sf.description}
-            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            onChange={handleChange}
           />
         ) : (
           <p key={sf.id}>{sf.name} field</p>

diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
@@ -28,7 +28,7 @@ export const Default: Story = (args: Props) => {
         <SliderField
           {...args}
           name="Inverse of above"
-          value={args.max - (args?.value || 0)}
+          value={(args.max || 0) - (args?.value || 0)}
           description={undefined}
           onChange={handleChange}
         />

diff --git a/...abs/widgets/RightPanel/Settings/index.tsx → ...tures/Editor/SidePanel/Settings/index.tsx b/...abs/widgets/RightPanel/Settings/index.tsx → ...tures/Editor/SidePanel/Settings/index.tsx
@@ -4,18 +4,16 @@ import { type Item } from "@reearth/services/api/propertyApi/utils";
 import { styled } from "@reearth/services/theme";
 
 type Props = {
-  widgetPropertyId: string;
+  id: string;
   propertyItems?: Item[];
 };
 
-const Settings: React.FC<Props> = ({ widgetPropertyId, propertyItems }) => {
-  console.log("PI", propertyItems);
-
+const Settings: React.FC<Props> = ({ id, propertyItems }) => {
   return (
     <Wrapper>
       {propertyItems?.map((i, idx) => (
         <SidePanelSectionField title={i.title ?? "Undefined"} key={idx}>
-          <FieldComponents propertyId={widgetPropertyId} item={i} />
+          <FieldComponents propertyId={id} item={i} />
         </SidePanelSectionField>
       ))}
     </Wrapper>

diff --git a/web/src/beta/features/Editor/hooks.ts b/web/src/beta/features/Editor/hooks.ts
@@ -9,8 +9,8 @@ import { type ProjectType } from "./tabs/publish/Nav";
 import { type Device } from "./tabs/widgets/Nav";
 
 export default ({ tab }: { sceneId: string; tab: Tab }) => {
+  const [selectedSceneSetting, setSceneSetting] = useState(false);
   const [selectedDevice, setDevice] = useState<Device>("desktop");
-
   const [selectedProjectType, setSelectedProjectType] = useState<ProjectType>(
     tab === "story" ? "story" : "default",
   );
@@ -56,11 +56,15 @@ export default ({ tab }: { sceneId: string; tab: Tab }) => {
     [setWidgetEditor],
   );
 
+  const handleSceneSettingSelect = useCallback(() => setSceneSetting(selected => !selected), []);
+
   return {
+    selectedSceneSetting,
     selectedDevice,
     selectedProjectType,
     visualizerWidth,
     showWidgetEditor,
+    handleSceneSettingSelect,
     handleDeviceChange,
     handleProjectTypeChange,
     handleWidgetEditorToggle,

diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -36,10 +36,12 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab, stories
   };
 
   const {
+    selectedSceneSetting,
     selectedDevice,
     selectedProjectType,
     visualizerWidth,
     showWidgetEditor,
+    handleSceneSettingSelect,
     handleDeviceChange,
     handleProjectTypeChange,
     handleWidgetEditorToggle,
@@ -74,11 +76,11 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab, stories
 
   const { leftPanel } = useLeftPanel({
     tab,
-    sceneId,
     nlsLayers,
     selectedStory,
     selectedLayerId: selectedLayer?.id,
     currentPage,
+    selectedSceneSetting,
     onCurrentPageChange: handleCurrentPageChange,
     onPageDuplicate: handlePageDuplicate,
     onPageDelete: handlePageDelete,
@@ -87,10 +89,16 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab, stories
     onLayerDelete: handleLayerDelete,
     onLayerSelect: handleLayerSelect,
     onLayerNameUpdate: handleLayerNameUpdate,
+    onSceneSettingSelect: handleSceneSettingSelect,
     onDataSourceManagerOpen: handleDataSourceManagerOpener,
   });
 
-  const { rightPanel } = useRightPanel({ tab, sceneId, currentPage });
+  const { rightPanel } = useRightPanel({
+    tab,
+    sceneId,
+    currentPage,
+    showSceneSettings: selectedSceneSetting,
+  });
 
   const { secondaryNavbar } = useSecondaryNavbar({
     tab,

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,42 +1,46 @@
+import ListItem from "@reearth/beta/components/ListItem";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
-import Text from "@reearth/beta/components/Text";
 import type { LayerNameUpdateProps } from "@reearth/beta/features/Editor/useLayers";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
-import { PropertySchemaGroup } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 import Layers from "../Layers";
 
 type GroupSectionFieldProps = {
-  groups: PropertySchemaGroup[];
   layers: NLSLayer[];
   selectedLayerId?: string;
+  selectedSceneSetting?: boolean;
   onLayerDelete: (id: string) => void;
   onLayerNameUpdate: (inp: LayerNameUpdateProps) => void;
   onLayerSelect: (id: string) => void;
+  onSceneSettingSelect: () => void;
   onDataSourceManagerOpen: () => void;
 };
 
 const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
-  groups,
   layers,
   selectedLayerId,
+  selectedSceneSetting,
   onLayerDelete,
   onLayerNameUpdate,
   onLayerSelect,
+  onSceneSettingSelect,
   onDataSourceManagerOpen,
 }) => {
   const t = useT();
 
   return (
     <>
       <StyledSidePanelSectionField title={t("Scene")}>
-        {groups.map(({ schemaGroupId, title }) => (
+        {/* {groups.map(({ schemaGroupId, title }) => (
           <GroupSectionFieldText key={schemaGroupId} size="footnote">
             {title}
           </GroupSectionFieldText>
-        ))}
+        ))} */}
+        <ListItem isSelected={selectedSceneSetting} onItemClick={onSceneSettingSelect}>
+          {t("Main")}
+        </ListItem>
       </StyledSidePanelSectionField>
       <StyledSidePanelSectionField title={t("Layers")}>
         <Layers
@@ -52,12 +56,6 @@ const GroupSectionField: React.FC<GroupSectionFieldProps> = ({
   );
 };
 
-const GroupSectionFieldText = styled(Text)`
-  padding-left: 4px;
-  padding-bottom: 4px;
-  cursor: pointer;
-`;
-
 const StyledSidePanelSectionField = styled(SidePanelSectionField)`
   background: inherit;
   border-bottom: 1px solid ${({ theme }) => theme.outline.weaker};

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
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";

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,44 +1,46 @@
-import Loading from "@reearth/beta/components/Loading";
+// import Loading from "@reearth/beta/components/Loading";
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
 import GroupSectionField from "@reearth/beta/features/Editor/tabs/map/LeftPanel/GroupField";
-import { useSceneFetcher } from "@reearth/services/api";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
-import { useTheme } from "@reearth/services/theme";
+// import { useTheme } from "@reearth/services/theme";
 
 import type { LayerNameUpdateProps } from "../../../useLayers";
 
 type Props = {
-  sceneId: string;
   layers: NLSLayer[];
   selectedLayerId?: string;
+  selectedSceneSetting?: boolean;
   onLayerDelete: (id: string) => void;
   onLayerNameUpdate: (inp: LayerNameUpdateProps) => void;
   onLayerSelect: (id: string) => void;
+  onSceneSettingSelect: () => void;
   onDataSourceManagerOpen: () => void;
 };
 
 const MapSidePanel: React.FC<Props> = ({
-  sceneId,
   layers,
   selectedLayerId,
+  selectedSceneSetting,
   onLayerDelete,
   onLayerSelect,
   onLayerNameUpdate,
+  onSceneSettingSelect,
   onDataSourceManagerOpen,
 }) => {
   const t = useT();
-  const theme = useTheme();
+  // const theme = useTheme();
 
-  const { useSceneQuery } = useSceneFetcher();
+  // const { useSceneQuery } = useSceneFetcher();
 
-  const { scene } = useSceneQuery({ sceneId });
+  // const { scene } = useSceneQuery({ sceneId });
 
-  const groups = scene?.property?.schema?.groups;
+  // const groups = scene?.property?.schema?.groups;
 
-  return !groups ? (
-    <Loading animationSize={80} animationColor={theme.select.main} />
-  ) : (
+  // return !groups ? (
+  //   <Loading animationSize={80} animationColor={theme.select.main} />
+  // ) : (
+  return (
     <SidePanelCommon
       location="left"
       contents={[
@@ -47,12 +49,13 @@ const MapSidePanel: React.FC<Props> = ({
           title: t("Outline"),
           children: (
             <GroupSectionField
-              groups={groups}
               layers={layers}
               selectedLayerId={selectedLayerId}
+              selectedSceneSetting={selectedSceneSetting}
               onLayerDelete={onLayerDelete}
               onLayerNameUpdate={onLayerNameUpdate}
               onLayerSelect={onLayerSelect}
+              onSceneSettingSelect={onSceneSettingSelect}
               onDataSourceManagerOpen={onDataSourceManagerOpen}
             />
           ),