Zustand

index.html

@@ -76,8 +76,8 @@
 
   <a-scene
     renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: true;"
-    inspector="url: ./dist/3dstreet-editor.js" timed-inspector="1" loading-screen="enabled: false" notify metadata
-    scene-title reflection device-orientation-permission-ui="enabled: false"
+    loading-screen="enabled: false" notify metadata
+    reflection device-orientation-permission-ui="enabled: false"
     webxr="requiredFeatures:hit-test,local-floor;referenceSpaceType:local-floor;" xr-mode-ui="XRMode: ar">
     <a-assets>
       <!-- TODO: Add this to repo documentation  -->
@@ -129,27 +129,5 @@
     });
   });
 </script>
-<script>
-
-  function startEditor() {
-    var sceneEl = document.querySelector('a-scene');
-    sceneEl.components.inspector.openInspector();
-    document.querySelector('.viewer-header-wrapper').style.display = 'none';
-  }
-
-  // launch the inspector in x seconds if ?viewer querystring NOT present
-  AFRAME.registerComponent('timed-inspector', {
-    init: function () {
-      const urlParams = new URLSearchParams(window.location.search);
-      const viewerParam = urlParams.get('viewer');
-      if (!viewerParam) {
-        setTimeout(function () {
-          window.postMessage('INJECT_AFRAME_INSPECTOR');
-        }, this.data * 1000);
-      }
-    }
-  });
-</script>
-<!-- <script src="./dist/3dstreet-editor.js"></script> -->
 
 </html>

package.json

@@ -52,7 +52,8 @@
     "react-select": "^5.4.0",
     "stripe": "^15.8.0",
     "three": "0.145.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.5",

src/components/screentock.js

@@ -1,18 +1,5 @@
 /* AFRAME */
-
-// function buttonScreenshotTock() {
-//   AFRAME.scenes[0].setAttribute('screentock', 'type', 'jpg');
-//   AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
-// }
-// function buttonScreenshotTockPNG() {
-//   AFRAME.scenes[0].setAttribute('screentock', 'type', 'png');
-//   AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
-// }
-// function buttonCaptureImage() {
-//   AFRAME.scenes[0].setAttribute('screentock', 'type', 'img');
-//   AFRAME.scenes[0].setAttribute('screentock', 'imgElementSelector', '#captureImg');
-//   AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
-// }
+import useStore from '../store';
 
 AFRAME.registerComponent('screentock', {
   schema: {
@@ -62,7 +49,7 @@ AFRAME.registerComponent('screentock', {
       ctx.textAlign = 'center';
       ctx.fillStyle = '#FFF';
       ctx.fillText(
-        STREET.utils.getCurrentSceneTitle(),
+        useStore.getState().sceneTitle,
         screenWidth - screenWidth / 2,
         screenHeight - 43
       );

src/components/streetplan-loader.js

@@ -1,6 +1,9 @@
 /* global AFRAME, XMLHttpRequest */
+import useStore from '../store.js';
 var streetplanUtils = require('../streetplan/streetplan-utils.js');
 
+const state = useStore.getState();
+
 AFRAME.registerComponent('streetplan-loader', {
   dependencies: ['street'],
   schema: {
@@ -25,20 +28,8 @@ AFRAME.registerComponent('streetplan-loader', {
     // streetplan alternative name
     // const streetplanAltName = streetData.altName;
 
-    console.log('streetplanName', streetplanName);
-
-    let currentSceneTitle;
-    const sceneEl = this.el.sceneEl;
-    if (sceneEl && sceneEl.getAttribute('metadata')) {
-      currentSceneTitle = sceneEl.getAttribute('metadata').sceneTitle;
-    }
-    if (!currentSceneTitle) {
-      // only set title from streetplan if none exists
-      sceneEl.setAttribute('metadata', 'sceneTitle', streetplanName);
-      console.log(
-        'therefore setting metadata sceneTitle as streetplanName',
-        streetplanName
-      );
+    if (!state.sceneTitle) {
+      state.setSceneTitle(streetplanName);
     }
 
     el.setAttribute('data-layer-name', 'StreetPlan • ' + streetplanName);

src/editor/components/Main.js

@@ -237,7 +237,6 @@ 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 id="inspectorContainer">
@@ -315,7 +314,7 @@ export default class Main extends Component {
         )}
         {this.state.inspectorEnabled && (
           <div id="scene-title" className="clickable">
-            <SceneEditTitle sceneData={sceneData} />
+            <SceneEditTitle />
           </div>
         )}
         {this.state.inspectorEnabled && (

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

@@ -1,26 +1,13 @@
-import { useEffect, useState } from 'react';
 import styles from './SceneEditTitle.module.scss';
 import { useAuthContext } from '../../../contexts/index.js';
 import { updateSceneIdAndTitle } from '../../../api/scene';
+import useStore from '../../../../store.js';
 
 const SceneEditTitle = ({ sceneData }) => {
-  const [title, setTitle] = useState(sceneData?.sceneTitle);
+  const title = useStore((state) => state.sceneTitle);
+  const setTitle = useStore((state) => state.setSceneTitle);
   const { currentUser } = useAuthContext();
 
-  const sceneId = STREET.utils.getCurrentSceneId();
-
-  useEffect(() => {
-    if (sceneData.sceneId === sceneId) {
-      setTitle(sceneData.sceneTitle);
-    }
-  }, [sceneData?.sceneTitle, sceneData?.sceneId, sceneId]);
-
-  useEffect(() => {
-    AFRAME.scenes[0].addEventListener('newTitle', (event) => {
-      setTitle(event.detail.sceneTitle ?? '');
-    });
-  }, []);
-
   const handleEditClick = () => {
     const newTitle = prompt('Edit the title:', title);
 
@@ -34,14 +21,10 @@ const SceneEditTitle = ({ sceneData }) => {
 
   const saveNewTitle = async (newTitle) => {
     try {
-      if (sceneData?.sceneId) {
-        if (currentUser.uid === STREET.utils.getAuthorId()) {
-          await updateSceneIdAndTitle(sceneData?.sceneId, newTitle);
-        }
+      if (currentUser.uid === STREET.utils.getAuthorId()) {
+        await updateSceneIdAndTitle(STREET.utils.getCurrentSceneId(), newTitle);
+        STREET.notify.successMessage(`New scene title saved: ${newTitle}`);
       }
-      AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', newTitle);
-      AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneData?.sceneId);
-      STREET.notify.successMessage(`New scene title saved: ${newTitle}`);
     } catch (error) {
       console.error('Error with update title', error);
       STREET.notify.errorMessage(`Error updating scene title: ${error}`);
@@ -50,13 +33,11 @@ const SceneEditTitle = ({ sceneData }) => {
 
   return (
     <div className={styles.wrapper}>
-      {
-        <div className={styles.readOnly}>
-          <p className={styles.title} onClick={handleEditClick}>
-            {title || 'Untitled'}
-          </p>
-        </div>
-      }
+      <div className={styles.readOnly}>
+        <p className={styles.title} onClick={handleEditClick}>
+          {title || 'Untitled'}
+        </p>
+      </div>
     </div>
   );
 };

src/editor/components/modals/ScenesModal/ScenesModal.component.jsx

@@ -12,7 +12,7 @@ import { getCommunityScenes, getUserScenes } from '../../../api/scene';
 import { Load24Icon, Loader, Upload24Icon } from '../../../icons';
 import { signIn } from '../../../api';
 import posthog from 'posthog-js';
-
+import useStore from '../../../../store.js';
 const SCENES_PER_PAGE = 20;
 const tabs = [
   {
@@ -65,7 +65,7 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
       const sceneId = scene.id;
       const sceneTitle = sceneData.title;
       AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId);
-      AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', sceneTitle);
+      useStore.setState({ sceneTitle: sceneTitle });
       AFRAME.scenes[0].setAttribute('metadata', 'authorId', sceneData.author);
       STREET.notify.successMessage('Scene loaded from 3DStreet Cloud.');
       onClose();

src/editor/components/scenegraph/Toolbar.js

@@ -19,6 +19,7 @@ import posthog from 'posthog-js';
 import { UndoRedo } from '../components/UndoRedo';
 import debounce from 'lodash-es/debounce';
 import { CameraToolbar } from '../viewport/CameraToolbar';
+import useStore from '../../../store';
 // const LOCALSTORAGE_MOCAP_UI = "aframeinspectormocapuienabled";
 
 /**
@@ -42,7 +43,6 @@ export default class Toolbar extends Component {
     document.addEventListener('click', this.handleClickOutsideSave);
     Events.on('historychanged', (cmd) => {
       if (cmd) {
-        console.log('historychanged', cmd);
         // Debounce the cloudSaveHandler call
         this.debouncedCloudSaveHandler();
       }
@@ -130,7 +130,7 @@ export default class Toolbar extends Component {
       }
       // if there is no current user, show sign in modal
       let currentSceneId = STREET.utils.getCurrentSceneId();
-      let currentSceneTitle = STREET.utils.getCurrentSceneTitle();
+      let currentSceneTitle = useStore.getState().sceneTitle;
 
       posthog.capture('save_scene_clicked', {
         save_as: doSaveAs,

src/editor/index.js

@@ -10,9 +10,7 @@ import { Config } from './lib/config';
 import { History } from './lib/history';
 import { Shortcuts } from './lib/shortcuts';
 import { Viewport } from './lib/viewport';
-import { firebaseConfig } from './services/firebase.js';
 import './style/index.scss';
-import ReactGA from 'react-ga4';
 import posthog from 'posthog-js';
 import { commandsByType } from './lib/commands/index.js';
 
@@ -24,7 +22,6 @@ function Inspector() {
   this.isFirstOpen = true;
   this.modules = {};
   this.opened = false;
-
   // Wait for stuff.
   const doInit = () => {
     if (!AFRAME.scenes.length) {
@@ -72,6 +69,7 @@ Inspector.prototype = {
     this.selected = null;
 
     // Init React.
+
     const div = document.createElement('div');
     div.id = 'aframeInspector';
     div.setAttribute('data-aframe-inspector', 'app');
@@ -358,9 +356,7 @@ Inspector.prototype = {
   }
 };
 
-ReactGA.initialize(firebaseConfig.measurementId);
 const inspector = (AFRAME.INSPECTOR = new Inspector());
-
 posthog.init('phc_Yclai3qykyFi8AEFOrZsh6aS78SSooLzpDz9wQ9YAH9', {
   api_host: 'https://us.i.posthog.com',
   person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well

src/index.js

@@ -1,6 +1,7 @@
 /* global AFRAME, XMLHttpRequest, VERSION */
 import 'aframe-cursor-teleport-component';
 import 'aframe-extras/controls/index.js';
+import useStore from './store.js';
 var streetmixParsers = require('./aframe-streetmix-parsers');
 var streetmixUtils = require('./tested/streetmix-utils');
 require('./json-utils_1.1.js');
@@ -20,6 +21,10 @@ require('./components/street-geo.js');
 require('./components/street-environment.js');
 require('./components/intersection.js');
 require('./components/obb-clipping.js');
+require('./editor/index.js');
+// import { inspector } from './editor/index.js';
+
+const state = useStore.getState();
 
 if (typeof VERSION !== 'undefined') {
   console.log(`3DStreet Version: ${VERSION}`);
@@ -192,26 +197,10 @@ AFRAME.registerComponent('streetmix-loader', {
         const streetmixSegments = streetData.segments;
 
         const streetmixName = streetmixResponseObject.name;
-        console.log('streetmixName', streetmixName);
 
         el.setAttribute('streetmix-loader', 'name', streetmixName);
-
-        let currentSceneTitle;
-        if (AFRAME.scenes[0] && AFRAME.scenes[0].getAttribute('metadata')) {
-          currentSceneTitle =
-            AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
-        }
-        if (!currentSceneTitle) {
-          // only set title from streetmix if none exists
-          AFRAME.scenes[0].setAttribute(
-            'metadata',
-            'sceneTitle',
-            streetmixName
-          );
-          console.log(
-            'therefore setting metadata sceneTitle as streetmixName',
-            streetmixName
-          );
+        if (!state.sceneTitle) {
+          state.setSceneTitle(streetmixName);
         }
 
         el.setAttribute('data-layer-name', 'Streetmix • ' + streetmixName);