diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
index 067ef844c5..6a49a790c1 100644
--- 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
, "defaultValue">;
const Slider: React.FC = ({ ...props }) => (
diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
index 64e3229188..0e5b337e4d 100644
--- a/web/src/beta/components/fields/PropertyFields/index.tsx
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -27,6 +27,13 @@ const PropertyFields: React.FC = ({ 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" ? (
= ({ propertyId, item }) => {
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 ? (
= ({ 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" ? (
Button radio field
@@ -53,7 +60,7 @@ const PropertyFields: React.FC = ({ 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,7 +71,7 @@ const PropertyFields: React.FC = ({ 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" ? (
= ({ propertyId, item }) => {
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" ? (
@@ -80,10 +87,10 @@ const PropertyFields: React.FC = ({ propertyId, item }) => {
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}
/>
) : (
= ({ propertyId, item }) => {
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,7 +110,7 @@ const PropertyFields: React.FC = ({ 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" ? (
= ({ propertyId, item }) => {
name={sf.name}
value={value as CameraValue}
description={sf.description}
- onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+ onChange={handleChange}
/>
) : (
{sf.name} field
diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
index 8cf67861a5..8a497ab5fe 100644
--- 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) => {
diff --git a/web/src/beta/features/Editor/tabs/widgets/RightPanel/Settings/index.tsx b/web/src/beta/features/Editor/SidePanel/Settings/index.tsx
similarity index 78%
rename from web/src/beta/features/Editor/tabs/widgets/RightPanel/Settings/index.tsx
rename to web/src/beta/features/Editor/SidePanel/Settings/index.tsx
index 6ce73facdb..ef688c7781 100644
--- a/web/src/beta/features/Editor/tabs/widgets/RightPanel/Settings/index.tsx
+++ b/web/src/beta/features/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 = ({ widgetPropertyId, propertyItems }) => {
- console.log("PI", propertyItems);
-
+const Settings: React.FC = ({ id, propertyItems }) => {
return (
{propertyItems?.map((i, idx) => (
-
+
))}
diff --git a/web/src/beta/features/Editor/hooks.ts b/web/src/beta/features/Editor/hooks.ts
index 8565591dd6..54bfa5f7d8 100644
--- 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("desktop");
-
const [selectedProjectType, setSelectedProjectType] = useState(
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
index 846ed679c0..b3ee164911 100644
--- a/web/src/beta/features/Editor/index.tsx
+++ b/web/src/beta/features/Editor/index.tsx
@@ -36,10 +36,12 @@ const Editor: React.FC = ({ sceneId, projectId, workspaceId, tab, stories
};
const {
+ selectedSceneSetting,
selectedDevice,
selectedProjectType,
visualizerWidth,
showWidgetEditor,
+ handleSceneSettingSelect,
handleDeviceChange,
handleProjectTypeChange,
handleWidgetEditorToggle,
@@ -74,11 +76,11 @@ const Editor: React.FC = ({ 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 = ({ 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
index 46c4e73102..44eda968df 100644
--- 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,30 +1,31 @@
+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 = ({
- groups,
layers,
selectedLayerId,
+ selectedSceneSetting,
onLayerDelete,
onLayerNameUpdate,
onLayerSelect,
+ onSceneSettingSelect,
onDataSourceManagerOpen,
}) => {
const t = useT();
@@ -32,11 +33,14 @@ const GroupSectionField: React.FC = ({
return (
<>
- {groups.map(({ schemaGroupId, title }) => (
+ {/* {groups.map(({ schemaGroupId, title }) => (
{title}
- ))}
+ ))} */}
+
+ {t("Main")}
+
= ({
);
};
-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
index a49e812238..071ccf6c47 100644
--- 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
index 68974e5a68..831c9ee1f6 100644
--- 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 = ({
- 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 ? (
-
- ) : (
+ // return !groups ? (
+ //
+ // ) : (
+ return (
= ({
title: t("Outline"),
children: (
),
diff --git a/web/src/beta/features/Editor/tabs/map/RightPanel/index.tsx b/web/src/beta/features/Editor/tabs/map/RightPanel/index.tsx
index c62e0309cc..19e8c221dd 100644
--- a/web/src/beta/features/Editor/tabs/map/RightPanel/index.tsx
+++ b/web/src/beta/features/Editor/tabs/map/RightPanel/index.tsx
@@ -1,23 +1,35 @@
+import { useMemo } from "react";
+
import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
+import Settings from "@reearth/beta/features/Editor/SidePanel/Settings";
+import { useSceneFetcher } from "@reearth/services/api";
+import { convert } from "@reearth/services/api/propertyApi/utils";
+import { useT } from "@reearth/services/i18n";
type Props = {
sceneId?: string;
+ showSceneSettings?: boolean;
};
-const MapRightPanel: React.FC = () => {
+const MapRightPanel: React.FC = ({ sceneId, showSceneSettings }) => {
+ const t = useT();
+ const { useSceneQuery } = useSceneFetcher();
+
+ const { scene } = useSceneQuery({ sceneId });
+
+ const scenePropertyId = useMemo(() => scene?.property?.id, [scene?.property?.id]);
+ const sceneSettings = useMemo(() => convert(scene?.property), [scene?.property]);
+
return (
- Map Right Panel contentMap Right Panel contentMap Right Panel contentMap Right Panel
- content
-
+ children: showSceneSettings && scenePropertyId && (
+