fix json-3dstreet issues

3DStreet · Oct 8, 2023 · b8fc6c1 · b8fc6c1
1 parent 10aa7bd
commit b8fc6c1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -10,9 +10,6 @@
     <!-- mapbox -->
     <script src="./src/lib/aframe-mapbox-component.min.js"></script>
 
-    <!-- save / load -->
-    <script src="./src/json-utils.js"></script>
-
     <!-- ocean -->
     <script src="./src/components/ocean-plane.js"></script>
 
@@ -35,7 +32,7 @@
         <li onclick="buttonScreenshotTock()"> <a class="camera"  href="#"> <span> Capture image as PNG </span> <img src="ui_assets/camera-icon.svg"> </a></li>
         <li onclick="inputStreetmix()"> <a class="load"  href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
         <!-- <li onclick="inputJSON()"> <a class="load"  href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li> -->
-        <li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
+        <li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt" onchange="fileJSON"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
         <li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="ui_assets/vr-icon.svg"> </a></li>
       </ul>
     </div>
@@ -76,9 +73,6 @@
   </body>
   <script>
 
-    document.getElementById('inputfile')
-            .addEventListener('change', fileJSON);
-
     // only show VR button if headset connected
     AFRAME.registerComponent('vr-mode-ui-if-headset', {
       dependencies: ['vr-mode-ui'],

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@
 if (typeof VERSION !== 'undefined') { console.log(`3DStreet Version: ${VERSION} (Date: ${new Date(COMMIT_DATE).toISOString().split('T')[0]}, Commit Hash: #${COMMIT_HASH})`); }
 var streetmixParsers = require('./aframe-streetmix-parsers');
 var streetmixUtils = require('./tested/streetmix-utils');
+const jsonUtils = require('./json-utils.js');
 require('./components/anisotropy');
 require('./components/gltf-part');
 require('./lib/aframe-cursor-teleport-component.min.js');
@@ -12,6 +13,10 @@ require('./components/create-from-json');
 require('./components/screentock.js');
 require('aframe-atlas-uvs-component');
 
+/*
+load JSON file with 3d-street data from URL.
+3D scene elements will be loaded as children of a-scene
+*/
 AFRAME.registerSystem('json-3dstreet', {
   schema: {
     jsonURL: { type: 'string' }
@@ -34,8 +39,8 @@ AFRAME.registerSystem('json-3dstreet', {
           '[set-loader-from-hash]',
           '200 response received and JSON parsed, now createElementsFromJSON'
         );
-        createElementsFromJSON(jsonData);
-        let sceneId = getUUIDFromPath(fileURL);
+        jsonUtils.createElementsFromJSON(jsonData);
+        let sceneId = jsonUtils.getUUIDFromPath(fileURL);
         if (sceneId) {
           console.log('sceneId from fetchJSON from url hash loader', sceneId);
           AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId);

diff --git a/src/json-utils.js b/src/json-utils.js
@@ -305,8 +305,27 @@ function getModifiedProperty(entity, componentName) {
   return diff;
 }
 
-function createEntities(entitiesData, parentEl) {
+function prepareStreetContainer() {
+  let streetContainerEl = document.getElementById('street-container');
+  if (streetContainerEl) {
+    while (streetContainerEl.firstChild) {
+      streetContainerEl.removeChild(streetContainerEl.lastChild);
+    }
+  } else {
+    streetContainerEl = document.createElement('a-entity');
+    streetContainerEl.setAttribute('id', 'street-container');
+    streetContainerEl.setAttribute('data-layer-name', '3D Street Layers');
+    streetContainerEl.setAttribute('data-layer-show-children');
+    AFRAME.scenes[0].appendChild(streetContainerEl);
+  }  
+  return streetContainerEl;
+}
+
+function createEntities(entitiesData) {
   const sceneElement = document.querySelector('a-scene');
+
+  prepareStreetContainer();
+
   const removeEntities = ['environment', 'reference-layers'];
   for (const entityData of entitiesData) {
     if (
@@ -463,6 +482,8 @@ function getUUIDFromPath(path) {
   return null; // return null or whatever default value you prefer if no UUID found
 }
 
+module.exports.getUUIDFromPath = getUUIDFromPath;
+
 // this use os text input prompt, delete current scene, then load streetmix file
 function inputStreetmix() {
   streetmixURL = prompt(
@@ -472,10 +493,11 @@ function inputStreetmix() {
   setTimeout(function () {
     window.location.hash = streetmixURL;
   });
-  streetContainerEl = document.getElementById('street-container');
+  const streetContainerEl = document.getElementById('street-container');
   while (streetContainerEl.firstChild) {
     streetContainerEl.removeChild(streetContainerEl.lastChild);
   }
+
   AFRAME.scenes[0].setAttribute('metadata', 'sceneId', '');
   AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', '');
   streetContainerEl.innerHTML =
@@ -484,6 +506,8 @@ function inputStreetmix() {
     '""></a-entity>';
 }
 
+module.exports.inputStreetmix = inputStreetmix;
+
 // JSON loading starts here
 function getValidJSON(stringJSON) {
   // Preserve newlines, etc. - use valid JSON
@@ -509,18 +533,16 @@ function createElementsFromJSON(streetJSON) {
     AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', sceneTitle);
   }
 
-  streetContainerEl = document.getElementById('street-container');
-  while (streetContainerEl.firstChild) {
-    streetContainerEl.removeChild(streetContainerEl.lastChild);
-  }
+  createEntities(streetObject.data);
 
-  createEntities(streetObject.data, streetContainerEl);
   AFRAME.scenes[0].components['notify'].message(
     'Scene loaded from JSON',
     'success'
   );
 }
 
+module.exports.createElementsFromJSON = createElementsFromJSON;
+
 // viewer widget click to paste json string of 3dstreet scene
 function inputJSON() {
   const stringJSON = prompt('Please paste 3DStreet JSON string');
@@ -529,6 +551,8 @@ function inputJSON() {
   }
 }
 
+module.exports.inputJSON = inputJSON;
+
 // handle viewer widget click to open 3dstreet json scene
 function fileJSON() {
   let reader = new FileReader();
@@ -539,3 +563,5 @@ function fileJSON() {
   };
   reader.readAsText(this.files[0]);
 }
+
+module.exports.fileJSON = fileJSON;