From 742e7cad5175f57c44f527467f55c887aa6124cf Mon Sep 17 00:00:00 2001 From: jashan <20891087+jashanbhullar@users.noreply.github.com> Date: Wed, 27 Sep 2023 17:32:17 +0530 Subject: [PATCH 01/14] - Just some story updates and minor changes --- .../components/Markdown/index.stories.tsx | 45 +++++++++++++++---- web/src/beta/components/Markdown/index.tsx | 1 + 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/web/src/beta/components/Markdown/index.stories.tsx b/web/src/beta/components/Markdown/index.stories.tsx index dcde6878b7..f78faef793 100644 --- a/web/src/beta/components/Markdown/index.stories.tsx +++ b/web/src/beta/components/Markdown/index.stories.tsx @@ -1,6 +1,8 @@ -import { Meta, Story } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -import Component, { Props } from "."; +import { styled } from "@reearth/services/theme"; + +import Markdown, { Props } from "."; const markdown = ` > A block quote with ~strikethrough~ and a URL: https://reactjs.org. @@ -9,20 +11,47 @@ const markdown = ` * [ ] todo * [x] done + +[Link](https://reactjs.org) + +### Image +![Alt text](https://images.pexels.com/photos/5656637/pexels-photo-5656637.jpeg?auto=compress&cs=tinysrgb&w=200) + A table: | a | b | | - | - | `; -export default { - component: Component, - parameters: { actions: { argTypesRegex: "^on.*" } }, -} as Meta; +const meta: Meta = { + component: Markdown, +}; + +export default meta; + +type Story = StoryObj; -export const Default: Story = args => ; +export const Default: Story = (args: Props) => { + return ( + +
+ +
+ + ); +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 10%; + margin-left: 2rem; + margin-top: 2rem; + height: 300px; +`; Default.args = { children: markdown, - backgroundColor: "#fff", + onClick: () => console.log("clicked"), + onDoubleClick: () => console.log("double clicked clicked"), }; diff --git a/web/src/beta/components/Markdown/index.tsx b/web/src/beta/components/Markdown/index.tsx index 43d1b554cd..9f3b43a07c 100644 --- a/web/src/beta/components/Markdown/index.tsx +++ b/web/src/beta/components/Markdown/index.tsx @@ -58,6 +58,7 @@ const Wrapper = styled.div<{ styles?: Typography; dark: boolean }>` border-bottom: none; } + /* TODO: Fix hardcoded colors here */ code { background-color: ${({ dark }) => dark ? "rgba(240, 246, 252, 0.15)" : "rgba(27, 31, 35, 0.05)"}; From e6dd08fd113518dc702e0190bc4a0610e9813b3a Mon Sep 17 00:00:00 2001 From: jashan <20891087+jashanbhullar@users.noreply.github.com> Date: Wed, 27 Sep 2023 17:33:47 +0530 Subject: [PATCH 02/14] - MD Block. Finally! --- .../Block/builtin/Markdown/Editor.tsx | 66 +++++++++++++++++++ .../Block/builtin/Markdown/index.tsx | 47 +++++++++++++ .../core/StoryPanel/Block/builtin/index.ts | 7 +- 3 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx create mode 100644 web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx new file mode 100644 index 0000000000..eaa1a44c5a --- /dev/null +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx @@ -0,0 +1,66 @@ +import { debounce } from "lodash-es"; +import { useContext, useCallback, useLayoutEffect, useRef, useMemo, useState } from "react"; + +import Markdown from "@reearth/beta/components/Markdown"; +import { useT } from "@reearth/services/i18n"; +import { styled } from "@reearth/services/theme"; + +import { BlockContext } from "../common/Wrapper"; + +export type Props = { + text: string; + onUpdate: (text: string) => void; +}; + +const MdBlockEditor: React.FC = ({ text, onUpdate }) => { + const textareaRef = useRef(null); + const t = useT(); + const context = useContext(BlockContext); + + const [value, setValue] = useState(text); + + const debouncedHandleTextUpdate = useMemo(() => debounce(onUpdate, 1000), [onUpdate]); + + const onChange = useCallback( + (e: React.ChangeEvent) => { + setValue(e.currentTarget.value); + debouncedHandleTextUpdate(e.currentTarget.value); + }, + [debouncedHandleTextUpdate], + ); + + useLayoutEffect(() => { + if (!textareaRef?.current) return; + // Reset height - important to shrink on delete + textareaRef.current.style.height = "inherit"; + // Set height + textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; + }, [value, context?.editMode]); + + return context?.editMode ? ( + + ) : ( + {value ? value : t("Add markdown text here")} + ); +}; + +const StyledTextArea = styled.textarea` + width: 100%; + resize: none; + overflow: hidden; + min-height: 115px; + border: none; + font-size: 14px; +`; + +const StyledMarkdown = styled(Markdown)` + min-height: 115px; + font-size: 14px; +`; + +export default MdBlockEditor; diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx new file mode 100644 index 0000000000..fad31fb650 --- /dev/null +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx @@ -0,0 +1,47 @@ +import { useCallback, useMemo } from "react"; + +import { ValueTypes } from "@reearth/beta/utils/value"; + +import { getFieldValue } from "../../../utils"; +import { CommonProps as BlockProps } from "../../types"; +import usePropertyValueUpdate from "../common/usePropertyValueUpdate"; +import BlockWrapper from "../common/Wrapper"; + +import MdBlocEditor from "./Editor"; + +export type Props = BlockProps; + +const MdBlock: React.FC = ({ block, isSelected, ...props }) => { + const text = useMemo( + () => getFieldValue(block?.property?.items ?? [], "text") as ValueTypes["string"], + [block?.property?.items], + ); + + const { handlePropertyValueUpdate } = usePropertyValueUpdate(); + + const handleTextUpdate = useCallback( + (text: string) => { + const schemaGroup = block?.property?.items?.find( + i => i.schemaGroup === "default", + )?.schemaGroup; + if (!block?.property?.id || !schemaGroup) return; + handlePropertyValueUpdate(schemaGroup, block?.property?.id, "text", "string")(text); + }, + [block?.property?.id, block?.property?.items, handlePropertyValueUpdate], + ); + + return ( + + + + ); +}; + +export default MdBlock; diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/index.ts b/web/src/beta/lib/core/StoryPanel/Block/builtin/index.ts index 9784fc13b3..e9e17339e8 100644 --- a/web/src/beta/lib/core/StoryPanel/Block/builtin/index.ts +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/index.ts @@ -3,6 +3,7 @@ import { merge } from "lodash-es"; import { Component } from ".."; import ImageBlock from "./Image"; +import MdBlock from "./Markdown"; import TextBlock from "./Text"; import TitleBlock from "./Title"; import VideoBlock from "./Video"; @@ -12,18 +13,21 @@ export const TITLE_BUILTIN_STORY_BLOCK_ID = "reearth/titleStoryBlock"; // pseudo export const IMAGE_BUILTIN_STORY_BLOCK_ID = "reearth/imageStoryBlock"; export const TEXT_BUILTIN_STORY_BLOCK_ID = "reearth/textStoryBlock"; export const VIDEO_BUILTIN_STORY_BLOCK_ID = "reearth/videoStoryBlock"; +export const MD_BUILTIN_STORY_BLOCK_ID = "reearth/mdTextStoryBlock"; export const AVAILABLE_STORY_BLOCK_IDS = [ IMAGE_BUILTIN_STORY_BLOCK_ID, TEXT_BUILTIN_STORY_BLOCK_ID, VIDEO_BUILTIN_STORY_BLOCK_ID, + MD_BUILTIN_STORY_BLOCK_ID, ]; export type ReEarthBuiltinStoryBlocks = Record< | typeof TITLE_BUILTIN_STORY_BLOCK_ID | typeof IMAGE_BUILTIN_STORY_BLOCK_ID | typeof TEXT_BUILTIN_STORY_BLOCK_ID - | typeof VIDEO_BUILTIN_STORY_BLOCK_ID, + | typeof VIDEO_BUILTIN_STORY_BLOCK_ID + | typeof MD_BUILTIN_STORY_BLOCK_ID, T >; @@ -35,6 +39,7 @@ const reearthBuiltin: BuiltinStoryBlocks = { [IMAGE_BUILTIN_STORY_BLOCK_ID]: ImageBlock, [TEXT_BUILTIN_STORY_BLOCK_ID]: TextBlock, [VIDEO_BUILTIN_STORY_BLOCK_ID]: VideoBlock, + [MD_BUILTIN_STORY_BLOCK_ID]: MdBlock, }; const builtin = merge({}, reearthBuiltin); From 1f1854b06223f9c20123345d452661397ccfe6a1 Mon Sep 17 00:00:00 2001 From: jashan <20891087+jashanbhullar@users.noreply.github.com> Date: Wed, 27 Sep 2023 17:57:46 +0530 Subject: [PATCH 03/14] - Minor changes --- .../lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx index eaa1a44c5a..eb837c7724 100644 --- a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx @@ -45,7 +45,7 @@ const MdBlockEditor: React.FC = ({ text, onUpdate }) => { onChange={onChange} /> ) : ( - {value ? value : t("Add markdown text here")} + {value ? value : t("Add markdown text here")} ); }; @@ -56,11 +56,13 @@ const StyledTextArea = styled.textarea` min-height: 115px; border: none; font-size: 14px; + padding: 0px; `; -const StyledMarkdown = styled(Markdown)` +const StyledMarkdown = styled(Markdown)<{ empty: boolean }>` min-height: 115px; font-size: 14px; + opacity: ${({ empty }) => (empty ? 1 : 0.6)}; `; export default MdBlockEditor; From e6ab9aa669fac483a073a62d6cdbf657dbce88f6 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Thu, 28 Sep 2023 11:22:44 +0900 Subject: [PATCH 04/14] regen i18n --- web/src/services/i18n/translations/en.yml | 39 ++++++++++++----------- web/src/services/i18n/translations/ja.yml | 35 ++++++++++---------- 2 files changed, 38 insertions(+), 36 deletions(-) diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml index 6bcedb2f10..2202c9a7cf 100644 --- a/web/src/services/i18n/translations/en.yml +++ b/web/src/services/i18n/translations/en.yml @@ -21,10 +21,16 @@ You have passed the minimum value.: You have passed the minimum value. Remove: Remove Add Item: '' Please choose an option: '' +Wrong file format: Wrong file format +Choose: Choose +Upload: Upload Not found: Not found -Date: Date -File size: File size -Alphabetical: Alphabetical +Last Uploaded: Last Uploaded +First Uploaded: First Uploaded +A To Z: A To Z +Z To A: Z To A +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 URL: '' @@ -88,6 +94,13 @@ Container Settings: Container Settings Angle: Angle Narrow: Narrow Wide: Wide +Please select an asset before clicking Select.: Please select an asset before clicking Select. +Select Image: Select Image +Select: Select +No assets match your search.: No assets match your search. +You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: >- + You haven't uploaded any assets yet. Click the upload button above and select + a compatible file from your computer. Create New Workspace: Create New Workspace Create: Create Workspace Name: Workspace Name @@ -113,10 +126,6 @@ Something went wrong. Please try again later.: Something went wrong. Please try Project Settings: '' Upload file: Upload file Delete: Delete -No assets match your search.: No assets match your search. -You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: >- - You haven't uploaded any assets yet. Click the upload button above and select - a compatible file from your computer. You are about to delete one or more assets from the current workspace.: You are about to delete one or more assets from the current workspace. Please make sure no selected assets are in use. This cannot be undone.: Please make sure no selected assets are in use. This cannot be undone. Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: >- @@ -190,6 +199,7 @@ Play timeline: Play timeline ellipse: ellipse Open timeline: Open timeline Padding settings: Padding settings +Add markdown text here: '' Drop here: Drop here Write your story :): Write your story :) Normal: Normal @@ -248,12 +258,14 @@ Reset password: Reset password Create your Account: Create your Account Already have an account?: Already have an account? Log in: Log in +Date: Date +File size: File size +Alphabetical: Alphabetical Assets Library: Assets Library Use URL: Use URL Add video URL: Add video URL Save: Save Select Asset: Select Asset -Select: Select Your browser is too small: Your browser is too small Re:Earth needs at least 900px width to be used effectively. Please resize your browser window.: >- Re:Earth needs at least 900px width to be used effectively. Please resize your @@ -516,14 +528,3 @@ Failed to update widget.: Failed to update widget. Failed to remove widget.: Failed to remove widget. Failed to update widget alignment.: Failed to update widget alignment. Failed to update the widget align system.: Failed to update the widget align system. -Choose: Choose -Upload: Upload -Last Uploaded: Last Uploaded -First Uploaded: First Uploaded -A To Z: A To Z -Z To A: Z To A -Size Small to Large: Size Small to Large -Size Large to Small: Size Large to Small -Please select an asset before clicking Select.: Please select an asset before clicking Select. -Select Image: Select Image -Wrong file format: Wrong file format diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml index 56467cb940..ad1e3b1a3e 100644 --- a/web/src/services/i18n/translations/ja.yml +++ b/web/src/services/i18n/translations/ja.yml @@ -21,10 +21,16 @@ You have passed the minimum value.: You have passed the minimum value. Remove: 削除 Add Item: '' Please choose an option: '' +Wrong file format: Wrong file format +Choose: 選択 +Upload: アップロード Not found: ページが見つかりません -Date: 作成日時順 -File size: サイズ順 -Alphabetical: 名前順 +Last Uploaded: Last Uploaded +First Uploaded: First Uploaded +A To Z: A To Z +Z To A: Z To A +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 URL: '' @@ -84,6 +90,11 @@ Container Settings: Container Settings Angle: 角度 Narrow: 狭い Wide: 広い +Please select an asset before clicking Select.: Please select an asset before clicking Select. +Select Image: イメージ選択 +Select: 選択 +No assets match your search.: 検索条件に該当するアセットは見つかりませんでした。 +You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: アセットライブラリ Create New Workspace: 新規ワークスペース作成 Create: 作成 Workspace Name: ワークスペース名 @@ -109,8 +120,6 @@ Something went wrong. Please try again later.: 何らかの問題が発生しま Project Settings: プロジェクト設定 Upload file: ファイルアップロード Delete: 削除 -No assets match your search.: 検索条件に該当するアセットは見つかりませんでした。 -You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: アセットライブラリ You are about to delete one or more assets from the current workspace.: 1つまたは複数のアセットを削除しようとしています。 Please make sure no selected assets are in use. This cannot be undone.: 選択されたアセットが使用されていないことを確認してください。この操作は取り消せません。 Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.: プロジェクトをアーカイブ化すると、削除とアーカイブ化解除以外の編集は行えません。再度編集可能な状態にするには、プロジェクトのアーカイブ化を解除してください。 @@ -171,6 +180,7 @@ Play timeline: タイムラインを再生する ellipse: 円錐 Open timeline: タイムラインを開く Padding settings: 余白設定 +Add markdown text here: '' Drop here: ここにドロップ Write your story :): '' Normal: '' @@ -227,12 +237,14 @@ Reset password: パスワードをリセット Create your Account: アカウントを登録する Already have an account?: 既にアカウントをお持ちの場合 Log in: ログイン +Date: 作成日時順 +File size: サイズ順 +Alphabetical: 名前順 Assets Library: アセット Use URL: URL Add video URL: 映像URLを追加 Save: 保存 Select Asset: 選択 -Select: 選択 Your browser is too small: ブラウザ幅が小さすぎます Re:Earth needs at least 900px width to be used effectively. Please resize your browser window.: 横幅が900px以上になるようブラウザ幅を調節してください。 OK: 確認 @@ -477,14 +489,3 @@ Failed to update widget.: ウィジェットのアップデートに失敗しま Failed to remove widget.: ウィジェットの削除に失敗しました。 Failed to update widget alignment.: ウィジェットのアラインメントのアップデートに失敗しました。 Failed to update the widget align system.: ウィジェットのアラインシステムのアップデートに失敗しました。 -Choose: 選択 -Upload: アップロード -Last Uploaded: Last Uploaded -First Uploaded: First Uploaded -A To Z: A To Z -Z To A: Z To A -Size Small to Large: Size Small to Large -Size Large to Small: Size Large to Small -Please select an asset before clicking Select.: Please select an asset before clicking Select. -Select Image: イメージ選択 -Wrong file format: Wrong file format \ No newline at end of file From 7297dd85d05e03025bfded3371acdca3df6a2ef1 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Thu, 28 Sep 2023 17:43:20 +0900 Subject: [PATCH 05/14] show MD option, hide sidepanel scrollbar --- .../lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx | 2 +- web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx | 6 ++++++ web/src/services/api/storytellingApi/blocks.ts | 2 ++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx index eb837c7724..65e3e6c1f4 100644 --- a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx @@ -45,7 +45,7 @@ const MdBlockEditor: React.FC = ({ text, onUpdate }) => { onChange={onChange} /> ) : ( - {value ? value : t("Add markdown text here")} + {value || t("Add markdown text here")} ); }; diff --git a/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx b/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx index 043d564266..a6ee15f1eb 100644 --- a/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx +++ b/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx @@ -101,6 +101,12 @@ const PagesWrapper = styled.div<{ showingIndicator?: boolean; isEditable?: boole height: ${({ showingIndicator }) => (showingIndicator ? "calc(100% - 8px)" : "100%")}; overflow-y: auto; cursor: ${({ isEditable }) => (isEditable ? "pointer" : "default")}; + + ::-webkit-scrollbar { + display: none; + } + scrollbar-width: none; + -ms-overflow-style: none; `; const PageGap = styled.div<{ height?: number }>` diff --git a/web/src/services/api/storytellingApi/blocks.ts b/web/src/services/api/storytellingApi/blocks.ts index 5a4cfdd639..e82c47a316 100644 --- a/web/src/services/api/storytellingApi/blocks.ts +++ b/web/src/services/api/storytellingApi/blocks.ts @@ -32,11 +32,13 @@ export const TITLE_BUILTIN_STORY_BLOCK_ID = "reearth/titleStoryBlock"; // pseudo export const IMAGE_BUILTIN_STORY_BLOCK_ID = "reearth/imageStoryBlock"; export const TEXT_BUILTIN_STORY_BLOCK_ID = "reearth/textStoryBlock"; export const VIDEO_BUILTIN_STORY_BLOCK_ID = "reearth/videoStoryBlock"; +export const MD_BUILTIN_STORY_BLOCK_ID = "reearth/mdTextStoryBlock"; export const AVAILABLE_STORY_BLOCK_IDS = [ IMAGE_BUILTIN_STORY_BLOCK_ID, TEXT_BUILTIN_STORY_BLOCK_ID, VIDEO_BUILTIN_STORY_BLOCK_ID, + MD_BUILTIN_STORY_BLOCK_ID, ]; export type StoryBlockQueryProps = SceneQueryProps; From 5862c2d17506de707a4c83e0a0a4f3c35c067a64 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Thu, 28 Sep 2023 17:54:23 +0900 Subject: [PATCH 06/14] fix some styles --- .../lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx index 65e3e6c1f4..9e73750119 100644 --- a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx @@ -45,7 +45,7 @@ const MdBlockEditor: React.FC = ({ text, onUpdate }) => { onChange={onChange} /> ) : ( - {value || t("Add markdown text here")} + {value || t("Add markdown text here")} ); }; @@ -53,14 +53,15 @@ const StyledTextArea = styled.textarea` width: 100%; resize: none; overflow: hidden; - min-height: 115px; + ${({ value }) => !value && "min-height: 115px;"} border: none; font-size: 14px; padding: 0px; + outline: none; `; const StyledMarkdown = styled(Markdown)<{ empty: boolean }>` - min-height: 115px; + ${({ empty }) => empty && "min-height: 115px;"} font-size: 14px; opacity: ${({ empty }) => (empty ? 1 : 0.6)}; `; From 11816d3392114d9c193b4cacd85eb0b861e6522a Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 29 Sep 2023 10:42:58 +0900 Subject: [PATCH 07/14] add some japanese --- server/pkg/builtin/manifest.yml | 16 +----- server/pkg/builtin/manifest_ja.yml | 91 ++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+), 14 deletions(-) diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml index 88e0e7aacf..66a9169788 100644 --- a/server/pkg/builtin/manifest.yml +++ b/server/pkg/builtin/manifest.yml @@ -2070,18 +2070,6 @@ extensions: type: string ui: datetime title: Time - - id: storyBlock - name: Block - type: storyBlock - description: Storytelling Block - schema: - groups: - - id: default - title: Basic - fields: - - id: title - type: string - title: Title - id: textStoryBlock name: Text Block type: storyBlock @@ -2105,7 +2093,7 @@ extensions: title: Content ui: multiline - id: mdTextStoryBlock - name: MD Test Block + name: MD Text Block type: storyBlock description: Storytelling MD Text Block schema: @@ -2271,4 +2259,4 @@ extensions: title: Auto Play - id: loop type: bool - title: Loop \ No newline at end of file + title: Loop diff --git a/server/pkg/builtin/manifest_ja.yml b/server/pkg/builtin/manifest_ja.yml index 5f0414597a..f04a9c5972 100644 --- a/server/pkg/builtin/manifest_ja.yml +++ b/server/pkg/builtin/manifest_ja.yml @@ -1001,3 +1001,94 @@ extensions: always: 常に desktop: デスクトップのみ mobile: モバイルのみ + story: + name: ストーリー + description: ストーリーテリングのストーリー + storyPage: + name: ストーリーページ + description: ストーリーテリングのページ + propertySchema: + panel: + title: パネル設定 + fields: + padding: + title: 余白 + gap: + title: 空隙 + title: + title: タイトル設定 + fields: + title: + title: タイトル + color: + title: 色 + cameraAnimation: + title: カメラアニメーション + fields: + cameraPosition: + title: カメラ位置 + cameraDuration: + title: カメラ移動時間 + cameraDelay: + title: カメラ待機時間 + timePoint: + title: タイムポイント + fields: + timePoint: + title: 時間 + textStoryBlock: + name: テキスト + description: ストーリーテリングのテキストブロック + propertySchema: + panel: + title: パネル設定 + fields: + padding: + title: 余白 + default: + title: テキスト + fields: + text: + title: コンテンツ + mdTextStoryBlock: + name: マークダウン + description: ストーリーテリングのマークダウンブロック + propertySchema: + panel: + title: パネル設定 + fields: + padding: + title: 余白 + default: + title: マークダウン + fields: + text: + title: コンテンツ + imageStoryBlock: + name: 画像 + description: ストーリーテリングの画像ブロック + propertySchema: + panel: + title: パネル設定 + fields: + padding: + title: 余白 + default: + title: 画像 + fields: + text: + title: コンテンツ + videoStoryBlock: + name: 動画 + description: ストーリーテリングの動画ブロック + propertySchema: + panel: + title: パネル設定 + fields: + padding: + title: 余白 + default: + title: 動画 + fields: + text: + title: コンテンツ From 4bc16ac8d29f287eeee5c72d27090234301963b5 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 29 Sep 2023 10:43:27 +0900 Subject: [PATCH 08/14] show block icon instead of plugin icon for block dropdown --- web/src/beta/components/PopoverMenuContent/index.tsx | 4 ++-- web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/beta/components/PopoverMenuContent/index.tsx b/web/src/beta/components/PopoverMenuContent/index.tsx index ce9506e7c8..f77c28c6d0 100644 --- a/web/src/beta/components/PopoverMenuContent/index.tsx +++ b/web/src/beta/components/PopoverMenuContent/index.tsx @@ -1,10 +1,10 @@ -import Icon, { Icons } from "@reearth/beta/components/Icon"; +import Icon from "@reearth/beta/components/Icon"; import { css, styled } from "@reearth/services/theme"; export type MenuItem = { name: string; isSelected?: boolean; - icon?: Icons; + icon?: string; disabled?: boolean; onClick?: () => void; }; diff --git a/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx b/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx index d94db69c43..04d9a25d37 100644 --- a/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx +++ b/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx @@ -26,7 +26,7 @@ const BlockAddBar: React.FC = ({ installableStoryBlocks?.map?.(sb => { return { name: sb.name, - icon: "plugin", + icon: sb.extensionId ?? "plugin", onClick: () => { onBlockAdd?.(sb.extensionId, sb.pluginId); onBlockOpen(); From 879ee7a294988980db624317bb51aaebab1bdc44 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 29 Sep 2023 10:48:05 +0900 Subject: [PATCH 09/14] fix minor error --- web/src/beta/components/ListItem/index.tsx | 6 +++++- .../features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx | 3 +-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx index 38edc4a448..1c480ad1d7 100644 --- a/web/src/beta/components/ListItem/index.tsx +++ b/web/src/beta/components/ListItem/index.tsx @@ -36,7 +36,11 @@ const ListItem: FC = ({ return ( - {children} + {typeof children === "string" ? ( + {children} + ) : ( + children + )} {actionContent && ( ) : ( - {layerTitle} + layerTitle )} ); From 691debeebb4c930ffa8deb55df42735515745983 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 29 Sep 2023 10:49:58 +0900 Subject: [PATCH 10/14] fix opacity issue --- .../lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx | 2 +- .../beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx index 9e73750119..c8f42e383b 100644 --- a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/Editor.tsx @@ -63,7 +63,7 @@ const StyledTextArea = styled.textarea` const StyledMarkdown = styled(Markdown)<{ empty: boolean }>` ${({ empty }) => empty && "min-height: 115px;"} font-size: 14px; - opacity: ${({ empty }) => (empty ? 1 : 0.6)}; + opacity: ${({ empty }) => (!empty ? 1 : 0.6)}; `; export default MdBlockEditor; diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx index fad31fb650..1e74b0953b 100644 --- a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx +++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx @@ -7,7 +7,7 @@ import { CommonProps as BlockProps } from "../../types"; import usePropertyValueUpdate from "../common/usePropertyValueUpdate"; import BlockWrapper from "../common/Wrapper"; -import MdBlocEditor from "./Editor"; +import MdEditor from "./Editor"; export type Props = BlockProps; @@ -39,7 +39,7 @@ const MdBlock: React.FC = ({ block, isSelected, ...props }) => { propertyItems={block?.property?.items} settingsEnabled={false} {...props}> - + ); }; From 8072644e42d142df1ec2f39e7ed11e7057fbf327 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 29 Sep 2023 11:15:29 +0900 Subject: [PATCH 11/14] remove extra space --- server/pkg/builtin/manifest.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml index 66a9169788..1295b3da1b 100644 --- a/server/pkg/builtin/manifest.yml +++ b/server/pkg/builtin/manifest.yml @@ -2259,4 +2259,4 @@ extensions: title: Auto Play - id: loop type: bool - title: Loop + title: Loop \ No newline at end of file From af07fe12b2285631600fa09a897eb361fd2ad717 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 29 Sep 2023 11:15:45 +0900 Subject: [PATCH 12/14] remove extra space --- server/pkg/builtin/manifest_ja.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/pkg/builtin/manifest_ja.yml b/server/pkg/builtin/manifest_ja.yml index f04a9c5972..004105ad02 100644 --- a/server/pkg/builtin/manifest_ja.yml +++ b/server/pkg/builtin/manifest_ja.yml @@ -1091,4 +1091,4 @@ extensions: title: 動画 fields: text: - title: コンテンツ + title: コンテンツ \ No newline at end of file From f53abf35f9466a32695ca76c025104ae9ec233c8 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 29 Sep 2023 14:53:06 +0900 Subject: [PATCH 13/14] add page camera delay functionality --- web/src/beta/features/Editor/useStorytelling.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/web/src/beta/features/Editor/useStorytelling.ts b/web/src/beta/features/Editor/useStorytelling.ts index 5b203639fb..eb8b49846b 100644 --- a/web/src/beta/features/Editor/useStorytelling.ts +++ b/web/src/beta/features/Editor/useStorytelling.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { FlyTo } from "@reearth/beta/lib/core/types"; import type { Camera } from "@reearth/beta/utils/value"; @@ -18,6 +18,8 @@ const getPage = (id?: string, pages?: Page[]) => { export default function ({ sceneId, onFlyTo }: Props) { const t = useT(); + const timeoutRef = useRef(); + const { useStoriesQuery, useCreateStoryPage, @@ -66,7 +68,12 @@ export default function ({ sceneId, onFlyTo }: Props) { if (!destination) return; const duration = camera.fields.find(f => f.id === "cameraDuration")?.value as number; - onFlyTo({ ...destination }, { duration }); + const delay = (camera.fields.find(f => f.id === "cameraDelay")?.value ?? 0) as number; + + if (timeoutRef.current) clearTimeout(timeoutRef.current); + timeoutRef.current = setTimeout(() => { + onFlyTo({ ...destination }, { duration }); + }, delay * 1000); } }, [selectedStory?.pages, onFlyTo], From c5785daadc992d5e9d23eaebaa88191375c282f9 Mon Sep 17 00:00:00 2001 From: pyshx Date: Fri, 29 Sep 2023 13:38:27 +0530 Subject: [PATCH 14/14] update test --- server/e2e/gql_storytelling_test.go | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/server/e2e/gql_storytelling_test.go b/server/e2e/gql_storytelling_test.go index 56bc5f88ef..b3da31fbcd 100644 --- a/server/e2e/gql_storytelling_test.go +++ b/server/e2e/gql_storytelling_test.go @@ -934,8 +934,8 @@ func TestStoryPageBlocksCRUD(t *testing.T) { res.Object(). Path("$.data.node.stories[0].pages[0].blocks").Equal([]any{}) - _, _, blockID1 := createBlock(e, sID, storyID, pageID, "reearth", "storyBlock", nil) - _, _, blockID2 := createBlock(e, sID, storyID, pageID, "reearth", "storyBlock", nil) + _, _, blockID1 := createBlock(e, sID, storyID, pageID, "reearth", "textStoryBlock", nil) + _, _, blockID2 := createBlock(e, sID, storyID, pageID, "reearth", "textStoryBlock", nil) _, res = fetchSceneForStories(e, sID) res.Object(). @@ -947,7 +947,7 @@ func TestStoryPageBlocksCRUD(t *testing.T) { res.Object(). Path("$.data.node.stories[0].pages[0].blocks[:].id").Equal([]string{blockID2, blockID1}) - _, _, blockID3 := createBlock(e, sID, storyID, pageID, "reearth", "storyBlock", lo.ToPtr(1)) + _, _, blockID3 := createBlock(e, sID, storyID, pageID, "reearth", "textStoryBlock", lo.ToPtr(1)) _, res = fetchSceneForStories(e, sID) res.Object().