Skip to content

Commit

Permalink
chore(web): fix story page bugs (#826)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mkumbobeaty
mkumbobeaty authored Nov 23, 2023
1 parent 91a8215 commit 09338f5
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 107 deletions.
82 changes: 34 additions & 48 deletions web/src/beta/features/Editor/DataSourceManager/Common/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ const SelectDataType: React.FC<{ fileFormat: string; setFileFormat: (k: string)

const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
const t = useT();
const [sourceType, setSourceType] = useState<SourceType>("local");
const [sourceType, setSourceType] = useState<SourceType>("url");
const [fileFormat, setFileFormat] = useState<FileFormatType>("GeoJSON");
const [value, setValue] = useState("");
const [layerName, setLayerName] = useState("");
const [prioritizePerformance, setPrioritizePerformance] = useState(false);
const DataSourceOptions: DataSourceOptType = useMemo(
() => [
{ label: t("From Assets"), keyValue: "local" },
{ label: t("From Web"), keyValue: "url" },
{ label: t("From URL"), keyValue: "url" },
{ label: t("From Local"), keyValue: "local" },
{ label: t("From Value"), keyValue: "value" },
],
[t],
Expand Down Expand Up @@ -98,6 +98,10 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
return (
<ColJustifyBetween>
<AssetWrapper>
<SelectDataType
fileFormat={fileFormat}
setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
/>
<InputGroup
label={t("Source Type")}
description={t("Select the type of data source you want to add.")}>
Expand All @@ -110,57 +114,39 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
</SourceTypeWrapper>
</InputGroup>
{sourceType == "url" && (
<>
<SelectDataType
fileFormat={fileFormat}
setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
<InputGroup
label={t("Resource URL")}
description={t("URL of the data source you want to add.")}>
<Input
type="text"
placeholder={t("Input Text")}
value={value}
onChange={e => setValue(e.target.value)}
/>
<InputGroup
label={t("Resource URL")}
description={t("URL of the data source you want to add.")}>
<Input
type="text"
placeholder={t("Input Text")}
value={value}
onChange={e => setValue(e.target.value)}
/>
</InputGroup>
</>
</InputGroup>
)}
{sourceType == "value" && (
<>
<SelectDataType
fileFormat={fileFormat}
setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
<InputGroup
label={t("Value")}
description={t(
"Write syntactically correct data based on the file format you have selected above.",
)}>
<TextArea
placeholder={t("Input data here")}
rows={8}
value={value}
onChange={e => setValue(e.target.value)}
/>
<InputGroup
label={t("Value")}
description={t(
"Write syntactically correct data based on the file format you have selected above.",
)}>
<TextArea
placeholder={t("Input data here")}
rows={8}
value={value}
onChange={e => setValue(e.target.value)}
/>
</InputGroup>
</>
</InputGroup>
)}
{sourceType == "local" && (
<>
<SelectDataType
fileFormat={fileFormat}
setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
/>
<URLField
fileType="asset"
entityType={"file"}
name={t("Asset")}
value={value}
onChange={handleOnChange}
/>
</>
<URLField
fileType="asset"
entityType={"file"}
name={t("Asset")}
value={value}
onChange={handleOnChange}
/>
)}
</AssetWrapper>

Expand Down
22 changes: 12 additions & 10 deletions web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,21 @@ const LayerItem = ({
() => setIsEditing(true),
);

const handleChange = useCallback((newTitle: string) => setNewValue(newTitle), []);

const handleTitleSubmit = useCallback(() => {
setIsEditing(false);
if (newValue.trim() !== "") {
onLayerNameUpdate({ layerId: id, name: newValue });
}
}, [id, newValue, onLayerNameUpdate]);
const handleTitleSubmit = useCallback(
(newTitle: string) => {
setNewValue(newTitle);
setIsEditing(false);
if (newValue.trim() !== "") {
onLayerNameUpdate({ layerId: id, name: newTitle });
}
},
[id, newValue, onLayerNameUpdate],
);

const handleEditExit = useCallback(
(e?: React.KeyboardEvent<HTMLInputElement>) => {
if (layerTitle !== newValue && e?.key !== "Escape") {
handleTitleSubmit();
handleTitleSubmit(newValue);
} else {
setNewValue(layerTitle);
}
Expand Down Expand Up @@ -102,7 +104,7 @@ const LayerItem = ({
<StyledTextInput
value={newValue}
autoFocus
onChange={handleChange}
onChange={handleTitleSubmit}
onExit={handleEditExit}
onBlur={handleEditExit}
/>
Expand Down
34 changes: 18 additions & 16 deletions web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/PageItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { MouseEvent, useCallback, useState } from "react";
import { MouseEvent, useCallback, useEffect, useState } from "react";

import TextInput from "@reearth/beta/components/fields/common/TextInput";
import ListItem from "@reearth/beta/components/ListItem";
Expand All @@ -7,14 +7,12 @@ import Text from "@reearth/beta/components/Text";
import useDoubleClick from "@reearth/classic/util/use-double-click";
import { ValueType, ValueTypes } from "@reearth/classic/util/value";
import type { Page } from "@reearth/services/api/storytellingApi/utils";
import { useT } from "@reearth/services/i18n";
import { styled } from "@reearth/services/theme";

type PageItemProps = {
isSelected?: boolean;
title?: string;
isOpenAction?: boolean;
hasEmptySpace?: boolean;
propertyId: string;
storyPage: Page;
onItemClick: (e?: MouseEvent<Element>) => void;
Expand All @@ -36,7 +34,6 @@ const PageItem = ({
isSelected,
isOpenAction,
title,
hasEmptySpace,
propertyId,
storyPage,
onItemClick,
Expand All @@ -46,7 +43,6 @@ const PageItem = ({
onPageDelete,
onPropertyUpdate,
}: PageItemProps) => {
const t = useT();
const [isEditing, setIsEditing] = useState(false);
const [newValue, setNewValue] = useState(title);

Expand All @@ -55,20 +51,26 @@ const PageItem = ({
() => setIsEditing(true),
);

const handleChange = useCallback((newTitle: string) => setNewValue(newTitle), []);
useEffect(() => {
setNewValue(title);
}, [title]);

const handleTitleSubmit = useCallback(() => {
setIsEditing(false);
if (newValue?.trim() !== "") {
const schemaGroupId = storyPage.property.items?.[1]?.schemaGroup;
onPropertyUpdate?.(propertyId, schemaGroupId, "title", undefined, "string", newValue);
}
}, [newValue, onPropertyUpdate, propertyId, storyPage.property.items]);
const handleTitleSubmit = useCallback(
(newTitle: string) => {
setIsEditing(false);
setNewValue(newTitle);
if (newValue?.trim() !== "") {
const schemaGroupId = storyPage.property.items?.[1]?.schemaGroup;
onPropertyUpdate?.(propertyId, schemaGroupId, "title", undefined, "string", newTitle);
}
},
[newValue, onPropertyUpdate, propertyId, storyPage.property.items],
);

const handleEditExit = useCallback(
(e?: React.KeyboardEvent<HTMLInputElement>) => {
if (title !== newValue && e?.key !== "Escape") {
handleTitleSubmit();
newValue && handleTitleSubmit(newValue);
} else {
setNewValue(title);
}
Expand Down Expand Up @@ -113,13 +115,13 @@ const PageItem = ({
<StyledTextInput
value={newValue}
autoFocus
onChange={handleChange}
onChange={handleTitleSubmit}
onExit={handleEditExit}
onBlur={handleEditExit}
/>
) : (
<PageTitle size="footnote" onDoubleClick={handleDoubleClick}>
{hasEmptySpace || !title ? t("Untitled") : title}
{title}
</PageTitle>
)}
</ListItem>
Expand Down
1 change: 0 additions & 1 deletion web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ const ContentPage: React.FC<Props> = ({
setOpenedPageId(isOpen ? storyPage.id : undefined);
}}
onPageDelete={() => onPageDelete(storyPage.id)}
hasEmptySpace={hasEmptySpace}
title={hasEmptySpace || !title ? t("Untitled") : title}
setOpenedPageId={setOpenedPageId}
propertyId={storyPage.property.id}
Expand Down
62 changes: 34 additions & 28 deletions web/src/beta/lib/core/StoryPanel/Page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,35 +142,37 @@ const StoryPanel: React.FC<Props> = ({
ref={containerRef}
padding={panelSettings?.padding?.value}
gap={panelSettings?.gap?.value}>
{(isEditable || title?.title?.value) && (
<StoryBlock
block={{
id: titleId,
pluginId: "reearth",
extensionId: "titleStoryBlock",
name: t("Title"),
propertyId: page?.propertyId ?? "",
property: { title },
}}
isEditable={isEditable}
isSelected={selectedStoryBlockId === titleId}
onClick={() => onBlockSelect?.(titleId)}
onPropertyUpdate={onPropertyUpdate}
onPropertyItemAdd={onPropertyItemAdd}
onPropertyItemMove={onPropertyItemMove}
onPropertyItemDelete={onPropertyItemDelete}
/>
)}
<PageTitleWrapper>
{(isEditable || title?.title?.value) && (
<StoryBlock
block={{
id: titleId,
pluginId: "reearth",
extensionId: "titleStoryBlock",
name: t("Title"),
propertyId: page?.propertyId ?? "",
property: { title },
}}
isEditable={isEditable}
isSelected={selectedStoryBlockId === titleId}
onClick={() => onBlockSelect?.(titleId)}
onPropertyUpdate={onPropertyUpdate}
onPropertyItemAdd={onPropertyItemAdd}
onPropertyItemMove={onPropertyItemMove}
onPropertyItemDelete={onPropertyItemDelete}
/>
)}
{isEditable && (
<BlockAddBar
alwaysShow={storyBlocks && storyBlocks.length < 1}
openBlocks={openBlocksIndex === -1}
installableStoryBlocks={installableStoryBlocks}
onBlockOpen={() => handleBlockOpen(-1)}
onBlockAdd={() => handleBlockCreate(0)}
/>
)}
</PageTitleWrapper>

{isEditable && (
<BlockAddBar
alwaysShow={storyBlocks && storyBlocks.length < 1}
openBlocks={openBlocksIndex === -1}
installableStoryBlocks={installableStoryBlocks}
onBlockOpen={() => handleBlockOpen(-1)}
onBlockAdd={handleBlockCreate(0)}
/>
)}
{storyBlocks && storyBlocks.length > 0 && (
<DragAndDropList
uniqueKey="storyPanel"
Expand Down Expand Up @@ -235,3 +237,7 @@ const Wrapper = styled.div<{ padding: Spacing; gap?: number }>`
${({ padding }) => `padding-right: ${padding.right}px;`}
box-sizing: border-box;
`;

const PageTitleWrapper = styled.div`
position: relative;
`;
6 changes: 4 additions & 2 deletions web/src/services/i18n/translations/en.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ Size Small to Large: Size Small to Large
Size Large to Small: Size Large to Small
File Format: ''
File format of the data source you want to add.: ''
From Assets: ''
From Web: ''
From URL: 'From URL'
From Local: 'From Local'
From Value: ''
Source Type: ''
Select the type of data source you want to add.: ''
Expand All @@ -66,6 +66,8 @@ Input data here: Input data here
Asset: Asset
Prioritize Performance: Prioritize Performance
Add to Layer: Add to Layer
From Assets: 'From Assets'
From Web: 'From Web'
Choose layer to add: Choose layer to add
Layer of the data source you want to add.: Layer of the data source you want to add
layer name: Layer name
Expand Down
6 changes: 4 additions & 2 deletions web/src/services/i18n/translations/ja.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ Size Small to Large: Size Small to Large
Size Large to Small: Size Large to Small
File Format: ファイルフォーマット
File format of the data source you want to add.: ''
From Assets: ''
From Web: ''
From URL: ''
From Local: ''
From Value: ''
Source Type: ''
Select the type of data source you want to add.: ''
Expand All @@ -64,6 +64,8 @@ Input data here: データ入力
Asset: アセット
Prioritize Performance: ''
Add to Layer: レイヤー追加
From Assets: ''
From Web: ''
Choose layer to add: レイヤーの選択
Layer of the data source you want to add.: ''
layer name: レイヤー名
Expand Down

0 comments on commit 09338f5

Please sign in to comment.