Issue#261

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
 };

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 (
       <div>
         <Logo onToggleEdit={this.toggleEdit} isEditor={isEditor} />
@@ -239,6 +242,11 @@ export default class Main extends Component {
             <HelpButton />
           </div>
         )}
+        {this.state.inspectorEnabled && (
+          <div id="scene-title">
+            <SceneEditTitle sceneData={sceneData} />
+          </div>
+        )}
         {this.state.inspectorEnabled && (
           <div id={'zoom-buttons'}>
             <ZoomButtons />

src/components/components/SceneEditTitle/SceneEditTitle.component.jsx

@@ -0,0 +1,90 @@
+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);
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handleSaveClick();
+    } else if (event.key === 'Escape') {
+      handleCancelClick();
+    }
+  };
+  return (
+    <div className={styles.wrapper}>
+      {editMode ? (
+        <div className={styles.edit}>
+          <input
+            className={styles.title}
+            value={title}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+          />
+          <div className={styles.buttons}>
+            <div onClick={handleSaveClick} className={styles.check}>
+              <CheckMark32Icon />
+            </div>
+            <div onClick={handleCancelClick} className={styles.cross}>
+              <Cross32Icon />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className={styles.readOnly}>
+          <p className={styles.title}>{title}</p>
+          {!editMode && (
+            <div className={styles.editButton} onClick={handleEditClick}>
+              <Edit32Icon />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { SceneEditTitle };

src/components/components/SceneEditTitle/SceneEditTitle.module.scss

@@ -0,0 +1,104 @@
+.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;
+    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;
+    }
+  }
+
+  .readOnly {
+    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;
+    }
+  }
+}
+
+input {
+  background: none !important;
+  color: #fff !important;
+  font-size: 20px;
+  user-select: text;
+}
+
+input::selection {
+  background-color: #774dee;
+  opacity: 0.4;
+  color: #ffffff;
+}

src/components/components/SceneEditTitle/index.js

@@ -0,0 +1 @@
+export { SceneEditTitle } from './SceneEditTitle.component.jsx';

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';

src/icons/icons.jsx

@@ -232,6 +232,40 @@ const Mangnifier20Icon = () => (
   </svg>
 );
 
+const Edit32Icon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="33"
+    height="33"
+    viewBox="0 0 33 33"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.1264 7.12622C20.0212 6.23144 21.2348 5.72876 22.5002 5.72876C23.7656 5.72876 24.9792 6.23144 25.8739 7.12622C26.7687 8.021 27.2714 9.23459 27.2714 10.5C27.2714 11.7654 26.7687 12.979 25.8739 13.8738L11.8739 27.8738C11.6864 28.0613 11.432 28.1667 11.1668 28.1667H5.8335C5.28121 28.1667 4.8335 27.7189 4.8335 27.1667V21.8333C4.8335 21.5681 4.93885 21.3138 5.12639 21.1262L19.1264 7.12622ZM18.5002 10.5809L6.8335 22.2475V26.1667H10.7526L22.4193 14.5L18.5002 10.5809ZM23.8335 13.0858L19.9144 9.16666L20.5406 8.54044C21.0603 8.02073 21.7652 7.72876 22.5002 7.72876C23.2351 7.72876 23.94 8.02073 24.4597 8.54044C24.9794 9.06014 25.2714 9.76502 25.2714 10.5C25.2714 11.235 24.9794 11.9398 24.4597 12.4596L23.8335 13.0858Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const CheckMark32Icon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="33"
+    height="33"
+    viewBox="0 0 33 33"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.8334 21.1997L26.3257 8.70752L27.7399 10.1217L13.8334 24.0282L5.58398 15.7787L6.9982 14.3645L13.8334 21.1997Z"
+      fill="white"
+    />
+  </svg>
+);
+
 const Copy32Icon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -263,5 +297,7 @@ export {
   Cloud24Icon,
   Mangnifier20Icon,
   Upload24Icon,
+  Edit32Icon,
+  CheckMark32Icon,
   Copy32Icon
 };

src/icons/index.js

@@ -12,5 +12,7 @@ export {
   DropdownArrowIcon,
   Cloud24Icon,
   Mangnifier20Icon,
+  Edit32Icon,
+  CheckMark32Icon,
   Copy32Icon
 } from './icons.jsx';

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]);
-}
+}