diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
index 80ff85c920..f5af07fb78 100644
--- 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) => {
-
+
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 && (
+
),
},
]}
diff --git a/web/src/beta/features/Editor/tabs/widgets/RightPanel/index.tsx b/web/src/beta/features/Editor/tabs/widgets/RightPanel/index.tsx
index 688f4bec35..5f1113efeb 100644
--- a/web/src/beta/features/Editor/tabs/widgets/RightPanel/index.tsx
+++ b/web/src/beta/features/Editor/tabs/widgets/RightPanel/index.tsx
@@ -1,10 +1,10 @@
import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
+import Settings from "@reearth/beta/features/Editor/SidePanel/Settings";
import { useT } from "@reearth/services/i18n";
import ContainerSettings from "./ContainerSettings";
import useHooks from "./hooks";
import Manager, { ActionArea } from "./Manager";
-import Settings from "./Settings";
// TODO: these are currently rough definition
type Props = {
@@ -51,7 +51,7 @@ const SidePanel: React.FC = ({ sceneId }) => {
title: t("Inspector"),
hide: !selectedWidget,
children: selectedWidget && (
-
+
),
},
{
diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx
index 8f63197995..9fd600f865 100644
--- a/web/src/beta/features/Editor/useLeftPanel.tsx
+++ b/web/src/beta/features/Editor/useLeftPanel.tsx
@@ -10,7 +10,6 @@ import type { LayerNameUpdateProps } from "./useLayers";
type Props = {
tab: Tab;
- sceneId: string;
nlsLayers: NLSLayer[];
// storytelling
@@ -22,6 +21,10 @@ type Props = {
onPageAdd: (isSwipeable: boolean) => void;
onPageMove: (id: string, targetIndex: number) => void;
+ // scene
+ selectedSceneSetting?: boolean;
+ onSceneSettingSelect: () => void;
+
// layers
selectedLayerId?: string;
onLayerDelete: (id: string) => void;
@@ -32,10 +35,10 @@ type Props = {
export default ({
tab,
- sceneId,
nlsLayers,
selectedStory,
selectedLayerId,
+ selectedSceneSetting,
currentPage,
onCurrentPageChange,
onPageDuplicate,
@@ -45,6 +48,7 @@ export default ({
onLayerDelete,
onLayerNameUpdate,
onLayerSelect,
+ onSceneSettingSelect,
onDataSourceManagerOpen,
}: Props) => {
const leftPanel = useMemo(() => {
@@ -52,12 +56,13 @@ export default ({
case "map":
return (
);
@@ -80,14 +85,15 @@ export default ({
}
}, [
tab,
- sceneId,
nlsLayers,
selectedStory,
selectedLayerId,
+ selectedSceneSetting,
currentPage,
onLayerDelete,
onLayerNameUpdate,
onLayerSelect,
+ onSceneSettingSelect,
onDataSourceManagerOpen,
onCurrentPageChange,
onPageDuplicate,
diff --git a/web/src/beta/features/Editor/useRightPanel.tsx b/web/src/beta/features/Editor/useRightPanel.tsx
index ee556a77d2..b7db203eae 100644
--- a/web/src/beta/features/Editor/useRightPanel.tsx
+++ b/web/src/beta/features/Editor/useRightPanel.tsx
@@ -11,13 +11,14 @@ type Props = {
tab: Tab;
sceneId?: string;
currentPage?: GQLStoryPage;
+ showSceneSettings?: boolean;
};
-export default ({ tab, sceneId, currentPage }: Props) => {
+export default ({ tab, sceneId, currentPage, showSceneSettings }: Props) => {
const rightPanel = useMemo(() => {
switch (tab) {
case "map":
- return ;
+ return ;
case "story":
return ;
case "widgets":
@@ -27,7 +28,7 @@ export default ({ tab, sceneId, currentPage }: Props) => {
default:
return undefined;
}
- }, [tab, sceneId, currentPage]);
+ }, [tab, sceneId, currentPage, showSceneSettings]);
return {
rightPanel,
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 93606c7c79..e84b7e45a6 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -37,13 +37,11 @@ Value: ''
Description around.: ''
Write down your text: ''
Add to Layer: ''
-Padding settings: Padding settings
-Remove: Remove
-Untitled: Untitled
-Page: Page
Scene: Scene
+Main: ''
Layers: Layers
Outline: Outline
+Inspector: Inspector
Published: Published
Unpublished: Unpublished
Story: Story
@@ -74,11 +72,12 @@ Page will be available as result on search engines: ''
Your project will be unpublished.: Your project will be unpublished.
This means that anybody with the URL will become unable to view this project.: This means that anybody with the URL will become unable to view this project.
'**Warning**: This includes websites where this project is embedded.': '**Warning**: This includes websites where this project is embedded.'
+Untitled: Untitled
New Page: New Page
+Page: Page
Page Settings: Page Settings
Align System: Align System
Widget Manager: Widget Manager
-Inspector: Inspector
Container Settings: Container Settings
Narrow: Narrow
Wide: Wide
@@ -183,6 +182,8 @@ Playback timeline: Playback timeline
Play timeline: Play timeline
ellipse: ellipse
Open timeline: Open timeline
+Padding settings: Padding settings
+Remove: Remove
Drop here: Drop here
Write your story :): Write your story :)
Double click to start to write your story :): Double click to start to write your story :)
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index f05dfd98ee..1d42675cdb 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -37,13 +37,11 @@ Value: ''
Description around.: ''
Write down your text: ''
Add to Layer: ''
-Padding settings: ''
-Remove: 削除
-Untitled: 無名
-Page: ページ
Scene: シーン
+Main: ''
Layers: レイヤー
Outline: アウトライン
+Inspector: インスペクター
Published: 一般公開
Unpublished: 非公開
Story: ストーリー
@@ -70,11 +68,12 @@ Page will be available as result on search engines: ''
Your project will be unpublished.: プロジェクトを非公開にする
This means that anybody with the URL will become unable to view this project.: URLを知っている人もこのプロジェクトを見ることができなくなります。
'**Warning**: This includes websites where this project is embedded.': '**Warning**このプロジェクトを埋め込んだWebサイトへ影響を及ぼす可能性があります。'
+Untitled: 無名
New Page: 新しいページ
+Page: ページ
Page Settings: ページ設定
Align System: アラインシステム
Widget Manager: ウィジェット管理
-Inspector: インスペクター
Container Settings: Container Settings
Narrow: 狭い
Wide: 広い
@@ -164,6 +163,8 @@ Playback timeline: タイムラインを逆再生する
Play timeline: タイムラインを再生する
ellipse: 円錐
Open timeline: タイムラインを開く
+Padding settings: 余白設定
+Remove: 削除
Drop here: ここにドロップ
Write your story :): ''
Double click to start to write your story :): ''