Merge branch 'main' into epic-street-editing

3DStreet · Jan 13, 2025 · cef492b · cef492b
2 parents dda25fb + 2b225e5
commit cef492b
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 65 deletions.
diff --git a/src/editor/api/scene.js b/src/editor/api/scene.js
@@ -236,7 +236,8 @@ const uploadThumbnailImage = async (sceneDocId) => {
     context.drawImage(screentockImgElement, posX, posY, newWidth, newHeight);
     // Rest of the code...
     const thumbnailDataUrl = resizedCanvas.toDataURL('image/jpeg', 0.5);
-    const blobFile = await fetch(thumbnailDataUrl).then((res) => res.blob());
+    const res = await fetch(thumbnailDataUrl);
+    const blobFile = await res.blob();
 
     const thumbnailRef = ref(storage, `scenes/${sceneDocId}/files/preview.jpg`);
 

diff --git a/src/editor/components/components/Save/Save.component.jsx b/src/editor/components/components/Save/Save.component.jsx
@@ -51,14 +51,6 @@ export const Save = ({ currentUser }) => {
       handleSave(doSaveAs);
     }
   }, [isSavingScene]); // eslint-disable-line react-hooks/exhaustive-deps
-  // if (isSavingScene) {
-  // // Events.on('historychanged', (cmd) => {
-  // //   if (cmd) {
-  // //     // Debounce the cloudSaveHandler call
-
-  // //     // this.debouncedCloudSaveHandler();
-  // //   }
-  // // });
 
   const toggleSaveActionState = () => {
     setIsSaveActionActive(!isSaveActionActive);

diff --git a/src/editor/components/modals/NewModal/NewModal.component.jsx b/src/editor/components/modals/NewModal/NewModal.component.jsx
@@ -2,7 +2,7 @@ import Modal from '../Modal.jsx';
 import useStore from '@/store.js';
 import styles from './NewModal.module.scss';
 import ScenePlaceholder from '@/../ui_assets/ScenePlaceholder.svg';
-import { inputStreetmix } from '@/editor/lib/SceneUtils.js';
+import { createBlankScene, inputStreetmix } from '@/editor/lib/SceneUtils.js';
 import { Button } from '@/editor/components/components';
 import { Upload24Icon } from '@/editor/icons';
 
@@ -14,19 +14,11 @@ export const NewModal = () => {
     setModal(null);
   };
 
-  const onClickNew = () => {
-    setModal(null);
-    AFRAME.INSPECTOR.selectEntity(null);
-    useStore.getState().newScene();
-    STREET.utils.newScene();
-    AFRAME.scenes[0].emit('newScene');
-  };
-
   const scenesData = [
     {
       title: 'Create Blank Scene',
       imagePath: '/ui_assets/cards/new-blank.jpg',
-      onClick: onClickNew
+      onClick: createBlankScene
     },
     {
       title: 'Import From Streetmix',
@@ -62,9 +54,15 @@ export const NewModal = () => {
             <div
               className={styles.img}
               onClick={(event) => {
-                scene.onClick(event);
-                saveScene(true);
                 onClose();
+                AFRAME.scenes[0].addEventListener(
+                  'newScene',
+                  () => {
+                    saveScene(true);
+                  },
+                  { once: true }
+                );
+                scene.onClick(event);
               }}
               style={{
                 backgroundImage: `url(${scene.imagePath || ScenePlaceholder})`,

diff --git a/src/editor/components/modals/ScreenshotModal/ScreenshotModal.component.jsx b/src/editor/components/modals/ScreenshotModal/ScreenshotModal.component.jsx
@@ -42,8 +42,6 @@ const getSceneName = (scene) => {
 function ScreenshotModal() {
   const setModal = useStore((state) => state.setModal);
   const modal = useStore((state) => state.modal);
-  const storedScreenshot = localStorage.getItem('screenshot');
-  const parsedScreenshot = JSON.parse(storedScreenshot);
   const { currentUser } = useAuthContext();
 
   const sceneId = STREET.utils.getCurrentSceneId();
@@ -203,10 +201,9 @@ function ScreenshotModal() {
           )}
         </div>
         <div className={styles.imageWrapper}>
-          <div
-            className={styles.screenshotWrapper}
-            dangerouslySetInnerHTML={{ __html: parsedScreenshot }}
-          />
+          <div className={styles.screenshotWrapper}>
+            <img id="screentock-destination" />
+          </div>
         </div>
       </div>
     </Modal>

diff --git a/src/editor/lib/SceneUtils.js b/src/editor/lib/SceneUtils.js
@@ -6,6 +6,11 @@ import {
   uploadThumbnailImage
 } from '@/editor/api/scene';
 
+export function createBlankScene() {
+  STREET.utils.newScene();
+  AFRAME.scenes[0].emit('newScene');
+}
+
 export function inputStreetmix() {
   const streetmixURL = prompt(
     'Please enter a Streetmix URL',
@@ -20,14 +25,19 @@ export function inputStreetmix() {
     window.location.hash = streetmixURL;
   });
 
+  AFRAME.scenes[0].addEventListener('streetmix-loader-street-loaded', () => {
+    // setTimeout very important here, otherwise all entities are positionned at 0,0,0 when reloading the scene
+    setTimeout(() => {
+      AFRAME.scenes[0].emit('newScene');
+    });
+  });
+
   const defaultStreetEl = document.getElementById('default-street');
   defaultStreetEl.setAttribute(
     'streetmix-loader',
     'streetmixStreetURL',
     streetmixURL
   );
-
-  AFRAME.scenes[0].emit('newScene');
 }
 
 export function createElementsForScenesFromJSON(streetData) {
@@ -81,21 +91,30 @@ export function convertToObject() {
   }
 }
 
-export function makeScreenshot() {
-  const imgHTML = '<img id="screentock-destination">';
-  // Set the screenshot in local storage
-  localStorage.setItem('screenshot', JSON.stringify(imgHTML));
-  const screenshotEl = document.getElementById('screenshot');
-  screenshotEl.play();
-
-  screenshotEl.setAttribute('screentock', 'type', 'img');
-  screenshotEl.setAttribute(
-    'screentock',
-    'imgElementSelector',
-    '#screentock-destination'
-  );
-  // take the screenshot
-  screenshotEl.setAttribute('screentock', 'takeScreenshot', true);
+export async function makeScreenshot() {
+  await new Promise((resolve, reject) => {
+    const screenshotEl = document.getElementById('screenshot');
+    screenshotEl.play();
+
+    const screentockImgElement = document.getElementById(
+      'screentock-destination'
+    );
+    screentockImgElement.addEventListener(
+      'load',
+      () => {
+        resolve();
+      },
+      { once: true }
+    );
+    screenshotEl.setAttribute('screentock', 'type', 'img');
+    screenshotEl.setAttribute(
+      'screentock',
+      'imgElementSelector',
+      '#screentock-destination'
+    );
+    // take the screenshot
+    screenshotEl.setAttribute('screentock', 'takeScreenshot', true);
+  });
 }
 
 export async function saveScene(currentUser, doSaveAs) {
@@ -168,9 +187,11 @@ export async function saveScene(currentUser, doSaveAs) {
 }
 
 export async function saveSceneWithScreenshot(currentUser, doSaveAs) {
-  makeScreenshot();
   const currentSceneId = await saveScene(currentUser, doSaveAs);
   if (currentSceneId) {
+    // wait a bit for models to be loaded, may not be enough...
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    await makeScreenshot();
     uploadThumbnailImage(currentSceneId);
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -2,10 +2,12 @@
 import 'aframe-cursor-teleport-component';
 import 'aframe-extras/controls/index.js';
 import useStore from './store.js';
-require('./json-utils_1.1.js');
+import * as streetUtils from './street-utils.js';
+require('./json-utils_1.1.js'); // this defines STREET.utils
+STREET.utils.newScene = streetUtils.newScene;
 var streetmixParsers = require('./aframe-streetmix-parsers');
 var streetmixUtils = require('./tested/streetmix-utils');
-var streetUtils = require('./street-utils.js');
+
 require('./components/gltf-part');
 require('./components/ocean');
 require('./components/svg-extruder.js');
@@ -34,8 +36,6 @@ require('./components/street-label.js');
 require('./editor/index.js');
 var firebase = require('./editor/services/firebase.js');
 
-const state = useStore.getState();
-
 if (typeof VERSION !== 'undefined') {
   console.log(`3DStreet Version: ${VERSION}`);
 }
@@ -142,9 +142,6 @@ AFRAME.registerComponent('street', {
 
     // the scene has been loaded, set the synchronize flag
     this.el.setAttribute('street', 'synchronize', false);
-    setTimeout(() => {
-      state.saveScene(true);
-    }, 1000);
   }
 });
 
@@ -213,6 +210,8 @@ AFRAME.registerComponent('streetmix-loader', {
         const streetmixName = streetmixResponseObject.name;
 
         el.setAttribute('streetmix-loader', 'name', streetmixName);
+
+        const state = useStore.getState();
         if (!state.sceneTitle) {
           state.setSceneTitle(streetmixName);
         }

diff --git a/src/store.js b/src/store.js
@@ -19,8 +19,8 @@ const useStore = create(
   subscribeWithSelector(
     devtools(
       (set) => ({
-        sceneId: null,
-        setSceneId: (newSceneId) => set({ sceneId: newSceneId }),
+        sceneId: null, // not used anywhere yet, we still use the metadata component
+        setSceneId: (newSceneId) => set({ sceneId: newSceneId }), // not used anywhere yet
         isSavingScene: false,
         saveScene: (newDoSaveAs) =>
           set({ isSavingScene: true, doSaveAs: newDoSaveAs }),
@@ -30,8 +30,8 @@ const useStore = create(
         setSceneTitle: (newSceneTitle) => set({ sceneTitle: newSceneTitle }),
         newScene: () =>
           set({ sceneId: null, sceneTitle: null, authorId: null }),
-        authorId: null,
-        setAuthorId: (newAuthorId) => set({ authorId: newAuthorId }),
+        authorId: null, // not used anywhere yet, we still use the metadata component
+        setAuthorId: (newAuthorId) => set({ authorId: newAuthorId }), // not used anywhere yet
         modal: firstModal(),
         setModal: (newModal) => {
           const currentModal = useStore.getState().modal;

diff --git a/src/street-utils.js b/src/street-utils.js
@@ -1,5 +1,6 @@
 /* global AFRAME */
 /* 3DStreet utils functions */
+import useStore from '@/store.js';
 
 /*
  * create element with provided Id, clear old element data and replace with new HTML string
@@ -26,11 +27,12 @@ function checkOrCreateEntity(elementId, parentEl, layerName = null) {
 /*
  * clear old scene elements and data. Create blank scene
  */
-function newScene(
+export function newScene(
   clearMetaData = true,
   clearUrlHash = true,
   addDefaultStreet = true
 ) {
+  AFRAME.INSPECTOR?.selectEntity(null);
   let environmentEl = document.getElementById('environment');
   if (environmentEl) environmentEl.removeAttribute('street-environment');
   environmentEl = checkOrCreateEntity(
@@ -70,6 +72,7 @@ function newScene(
 
   // clear metadata
   if (clearMetaData) {
+    useStore.getState().newScene();
     AFRAME.scenes[0].setAttribute('metadata', 'sceneId', '');
     AFRAME.scenes[0].setAttribute('metadata', 'authorId', '');
   }
@@ -82,9 +85,7 @@ function newScene(
   }
 }
 
-STREET.utils.newScene = newScene;
-
-function getVehicleEntities() {
+export function getVehicleEntities() {
   return getEntitiesByCategories([
     'vehicles',
     'vehicles-rigged',
@@ -93,14 +94,10 @@ function getVehicleEntities() {
   ]);
 }
 
-module.exports.getVehicleEntities = getVehicleEntities;
-
-function getStripingEntities() {
+export function getStripingEntities() {
   return getEntitiesByCategories(['lane-separator']);
 }
 
-module.exports.getStripingEntities = getStripingEntities;
-
 function getEntitiesByCategories(categoriesArray) {
   // get entity Nodes by array of their mixin categories
   const queryForCategoriesMixins = categoriesArray