From 39d199488c997b8bb1291bbd49829b34d6d89b66 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 27 Sep 2023 22:28:56 -0300 Subject: [PATCH 1/3] update scenegraph after load from json --- src/lib/toolbar.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/toolbar.js b/src/lib/toolbar.js index 02515803..9595c659 100644 --- a/src/lib/toolbar.js +++ b/src/lib/toolbar.js @@ -45,7 +45,9 @@ export function fileJSON(event) { reader.onload = function () { createElementsFromJSON(reader.result); + // update sceneGraph + Events.emit('entitycreated', streetContainerEl.sceneEl); }; reader.readAsText(event.target.files[0]); -} \ No newline at end of file +} From 6e3f6387fcca737b7665dacf80d7ee1f86291799 Mon Sep 17 00:00:00 2001 From: Rostyslav Date: Fri, 6 Oct 2023 17:09:26 +0300 Subject: [PATCH 2/3] feat: scene edit title component --- src/api/scene.js | 24 +++++- src/components/Main.js | 8 ++ .../SceneEditTitle.component.jsx | 81 +++++++++++++++++++ .../SceneEditTitle/SceneEditTitle.module.scss | 54 +++++++++++++ .../components/SceneEditTitle/index.js | 1 + src/components/components/index.js | 1 + src/icons/icons.jsx | 38 ++++++++- src/icons/index.js | 4 +- 8 files changed, 208 insertions(+), 3 deletions(-) create mode 100644 src/components/components/SceneEditTitle/SceneEditTitle.component.jsx create mode 100644 src/components/components/SceneEditTitle/SceneEditTitle.module.scss create mode 100644 src/components/components/SceneEditTitle/index.js diff --git a/src/api/scene.js b/src/api/scene.js index 8e60b670..0c9f2c70 100644 --- a/src/api/scene.js +++ b/src/api/scene.js @@ -54,6 +54,27 @@ const updateScene = async (sceneId, userUID, sceneData, title, version) => { } }; +const updateSceneIdAndTitle = async (sceneId, title) => { + try { + const userScenesRef = collection(db, 'scenes'); + const sceneDocRef = doc(userScenesRef, sceneId); + + const sceneSnapshot = await getDoc(sceneDocRef); + if (sceneSnapshot.exists()) { + await updateDoc(sceneDocRef, { + title: title, + updateTimestamp: serverTimestamp() + }); + + console.log('Firebase updateDoc (sceneId and title) fired'); + } else { + throw new Error('No existing sceneSnapshot exists.'); + } + } catch (error) { + throw new Error(error); + } +}; + const isSceneAuthor = async ({ sceneId, authorId }) => { if (!sceneId || !authorId) { console.log('sceneId or authorId is not provided in isSceneAuthor'); @@ -111,5 +132,6 @@ export { getUserScenes, generateSceneId, isSceneAuthor, - getCommunityScenes + getCommunityScenes, + updateSceneIdAndTitle }; diff --git a/src/components/Main.js b/src/components/Main.js index 691dc161..7e7df92c 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -14,6 +14,7 @@ import { injectCSS } from '../lib/utils'; import { SignInModal } from './modals/SignInModal'; import { ProfileModal } from './modals/ProfileModal'; import { ScenesModal } from './modals/ScenesModal'; +import { SceneEditTitle } from './components/SceneEditTitle'; THREE.ImageUtils.crossOrigin = ''; // Megahack to include font-awesome. injectCSS( @@ -185,6 +186,8 @@ export default class Main extends Component { render() { const scene = this.state.sceneEl; const isEditor = !!this.state.inspectorEnabled; + const sceneData = AFRAME.scenes[0].getAttribute('metadata', 'sceneTitle'); + return (
@@ -239,6 +242,11 @@ export default class Main extends Component {
)} + {this.state.inspectorEnabled && ( +
+ +
+ )} {this.state.inspectorEnabled && (
diff --git a/src/components/components/SceneEditTitle/SceneEditTitle.component.jsx b/src/components/components/SceneEditTitle/SceneEditTitle.component.jsx new file mode 100644 index 00000000..b293cab1 --- /dev/null +++ b/src/components/components/SceneEditTitle/SceneEditTitle.component.jsx @@ -0,0 +1,81 @@ +import React, { useEffect, useState } from 'react'; +import styles from './SceneEditTitle.module.scss'; +import { CheckMark32Icon, Cross32Icon, Edit32Icon } from '../../../icons'; +import { updateSceneIdAndTitle } from '../../../api/scene'; + +const SceneEditTitle = ({ sceneData }) => { + const [editMode, setEditMode] = useState(false); + const [title, setTitle] = useState(sceneData?.sceneTitle); + + useEffect(() => { + if (sceneData && sceneData.sceneTitle !== undefined) { + setTitle(sceneData.sceneTitle); + } + }, [sceneData?.sceneTitle]); + + useEffect(() => { + if (sceneData && sceneData.sceneTitle !== undefined) { + setTitle(sceneData.sceneTitle); + } + }, [sceneData?.sceneTitle]); + + const handleEditClick = () => { + setEditMode(true); + }; + + const handleSaveClick = async () => { + setEditMode(false); + + try { + await updateSceneIdAndTitle(sceneData?.sceneId, title); + + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', title); + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneData?.sceneId); + } catch (error) { + console.error('Error with update title', error); + } + }; + + const handleCancelClick = () => { + if (sceneData && sceneData.sceneTitle !== undefined) { + setTitle(sceneData.sceneTitle); + } + setEditMode(false); + }; + + const handleChange = (event) => { + setTitle(event.target.value); + }; + return ( +
+ {editMode ? ( +
+ +
+
+ +
+
+ +
+
+
+ ) : ( +
+

{title}

+ {!editMode && ( +
+ +
+ )} +
+ )} +
+ ); +}; + +export { SceneEditTitle }; diff --git a/src/components/components/SceneEditTitle/SceneEditTitle.module.scss b/src/components/components/SceneEditTitle/SceneEditTitle.module.scss new file mode 100644 index 00000000..e1753d6b --- /dev/null +++ b/src/components/components/SceneEditTitle/SceneEditTitle.module.scss @@ -0,0 +1,54 @@ +.wrapper { + position: absolute; + left: 110px; + bottom: 34px; + display: flex; + justify-content: center; + align-items: center; + + .title { + width: 300px; + text-overflow: ellipsis; + overflow: hidden; + height: 24px; + font-size: 20px !important; + white-space: nowrap; + cursor: pointer; + } + + .edit { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + + .buttons { + display: flex; + row-gap: 8px; + cursor: pointer; + svg { + width: 32px; + height: 32px; + } + } + + .readOnly { + display: flex; + justify-content: center; + align-items: center; + } +} + +input { + background: none !important; + color: #fff !important; + font-size: 20px; + user-select: text; +} + +input::selection { + background-color: #774dee; + opacity: 0.4; + color: #ffffff; +} diff --git a/src/components/components/SceneEditTitle/index.js b/src/components/components/SceneEditTitle/index.js new file mode 100644 index 00000000..01897250 --- /dev/null +++ b/src/components/components/SceneEditTitle/index.js @@ -0,0 +1 @@ +export { SceneEditTitle } from './SceneEditTitle.component.jsx'; diff --git a/src/components/components/index.js b/src/components/components/index.js index c1989013..9bf2cae1 100644 --- a/src/components/components/index.js +++ b/src/components/components/index.js @@ -10,3 +10,4 @@ export { Logo } from './Logo'; export { ScreenshotButton } from './ScreenshotButton'; export { ProfileButton } from './ProfileButton'; export { SceneCard } from './SceneCard'; +export { SceneEditTitle } from './SceneEditTitle'; diff --git a/src/icons/icons.jsx b/src/icons/icons.jsx index 322094a8..6e52cff8 100644 --- a/src/icons/icons.jsx +++ b/src/icons/icons.jsx @@ -232,6 +232,40 @@ const Mangnifier20Icon = () => ( ); +const Edit32Icon = () => ( + + + +); + +const CheckMark32Icon = () => ( + + + +); + export { Camera32Icon, Save24Icon, @@ -245,5 +279,7 @@ export { DropdownArrowIcon, Cloud24Icon, Mangnifier20Icon, - Upload24Icon + Upload24Icon, + Edit32Icon, + CheckMark32Icon }; diff --git a/src/icons/index.js b/src/icons/index.js index 97e94656..697b325d 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -11,5 +11,7 @@ export { CheckIcon, DropdownArrowIcon, Cloud24Icon, - Mangnifier20Icon + Mangnifier20Icon, + Edit32Icon, + CheckMark32Icon } from './icons.jsx'; From b3779a2a20fd7734714212d73827992156caf2e4 Mon Sep 17 00:00:00 2001 From: Rostyslav Date: Thu, 12 Oct 2023 19:06:45 +0300 Subject: [PATCH 3/3] add: minor features scene edit title --- .../SceneEditTitle.component.jsx | 13 ++++- .../SceneEditTitle/SceneEditTitle.module.scss | 50 +++++++++++++++++++ 2 files changed, 61 insertions(+), 2 deletions(-) diff --git a/src/components/components/SceneEditTitle/SceneEditTitle.component.jsx b/src/components/components/SceneEditTitle/SceneEditTitle.component.jsx index b293cab1..bf02dc01 100644 --- a/src/components/components/SceneEditTitle/SceneEditTitle.component.jsx +++ b/src/components/components/SceneEditTitle/SceneEditTitle.component.jsx @@ -46,6 +46,14 @@ const SceneEditTitle = ({ sceneData }) => { const handleChange = (event) => { setTitle(event.target.value); }; + + const handleKeyDown = (event) => { + if (event.key === 'Enter') { + handleSaveClick(); + } else if (event.key === 'Escape') { + handleCancelClick(); + } + }; return (
{editMode ? ( @@ -54,12 +62,13 @@ const SceneEditTitle = ({ sceneData }) => { className={styles.title} value={title} onChange={handleChange} + onKeyDown={handleKeyDown} />
-
+
-
+
diff --git a/src/components/components/SceneEditTitle/SceneEditTitle.module.scss b/src/components/components/SceneEditTitle/SceneEditTitle.module.scss index e1753d6b..0c723672 100644 --- a/src/components/components/SceneEditTitle/SceneEditTitle.module.scss +++ b/src/components/components/SceneEditTitle/SceneEditTitle.module.scss @@ -27,6 +27,40 @@ display: flex; row-gap: 8px; cursor: pointer; + transition: filter 0.2s, transform 0.2s; + + .check { + filter: brightness(90%); + &:hover { + filter: brightness(100%); + } + + &:focus { + outline: none; + } + + &:active { + filter: brightness(90%); + box-shadow: none; + } + } + + .cross { + filter: brightness(90%); + &:hover { + filter: brightness(100%); + } + + &:focus { + outline: none; + } + + &:active { + filter: brightness(90%); + box-shadow: none; + } + } + svg { width: 32px; height: 32px; @@ -37,6 +71,22 @@ display: flex; justify-content: center; align-items: center; + cursor: pointer; + transition: filter 0.2s, transform 0.2s; + filter: brightness(90%); + + &:hover { + filter: brightness(100%); + } + + &:focus { + outline: none; + } + + &:active { + filter: brightness(90%); + box-shadow: none; + } } }