From 214a06bd744541deefdb17a29399c2208f5f9bdd Mon Sep 17 00:00:00 2001
From: Alexander Goryushkin <aleotu@gmail.com>
Date: Tue, 5 Sep 2023 20:43:48 -0300
Subject: [PATCH 1/4] fix intersection saving issue

---
 src/index.js | 64 +++++++++++++++++++++++++++-------------------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/index.js b/src/index.js
index 34d03779a..df257f91f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -124,6 +124,11 @@ AFRAME.registerComponent('intersection', {
   init: function () {
     var data = this.data;
     var el = this.el;
+
+    // remove all child nodes if exists
+    while (el.firstChild) {
+      el.removeChild(el.lastChild);
+    }    
     const dimensionsArray = data.dimensions.split(' ').map((i) => Number(i));
     const positionArray = [this.el.getAttribute('position').x, this.el.getAttribute('position').y, this.el.getAttribute('position').z];
     const sidewalkArray = data.sidewalk.split(' ').map((i) => Number(i));
@@ -138,13 +143,8 @@ AFRAME.registerComponent('intersection', {
     const intersectWidth = dimensionsArray[0];
     const intersectDepth = dimensionsArray[1];
 
-    this.el.setAttribute('geometry', 'primitive', 'plane');
-    this.geometry = new THREE.PlaneGeometry(intersectWidth, intersectDepth, 1, 1);
-    this.material = new THREE.MeshStandardMaterial({ color: '#FF0000' });
-    this.mesh = new THREE.Mesh(this.geometry, this.material);
-    el.setObject3D('mesh', this.mesh);
-
-    this.el.setAttribute('position', { x: positionArray[0], y: positionArray[1], z: positionArray[2] });
+    this.el.setAttribute('geometry', `primitive:box; width: ${intersectWidth}; height: ${intersectDepth}; depth:0.2`);
+    this.el.setAttribute('position', { x: positionArray[0], y: - 0.1, z: positionArray[2] });
     this.el.setAttribute('rotation', '-90 0 0');
     this.el.setAttribute('material', 'src: #asphalt-texture; repeat:5 5; roughness:1');
 
@@ -170,13 +170,13 @@ AFRAME.registerComponent('intersection', {
     // describe sidewalk parameters
     const sidewalkParams = {
       west: {
-        positionVec: { x: intersectWidth / 2 - sidewalkArray[0] / 2 },
+        positionVec: { x: intersectWidth / 2 - sidewalkArray[0] / 2, z: 0.1 },
         rotationVec: { x: 90, y: 0, z: 0 },
         length: intersectDepth,
         width: sidewalkArray[0]
       },
       east: {
-        positionVec: { x: -intersectWidth / 2 + sidewalkArray[1] / 2 },
+        positionVec: { x: -intersectWidth / 2 + sidewalkArray[1] / 2, z: 0.1 },
         rotationVec: { x: 90, y: 0, z: 0 },
         length: intersectDepth,
         width: sidewalkArray[1]
@@ -185,7 +185,8 @@ AFRAME.registerComponent('intersection', {
         positionVec: {
           y: -intersectDepth / 2 + sidewalkArray[2] / 2,
           // add x offset to avoid sidewalk's element overlap
-          x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2
+          x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2,
+          z: 0.1
         },
         rotationVec: { x: 0, y: 90, z: -90 },
         // minus the width of the crossing sidewalk
@@ -196,7 +197,8 @@ AFRAME.registerComponent('intersection', {
         positionVec: {
           y: intersectDepth / 2 - sidewalkArray[3] / 2,
           // add x offset to avoid sidewalk's element overlap
-          x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2
+          x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2,
+          z: 0.1
         },
         rotationVec: { x: 0, y: 90, z: -90 },
         // minus the width of the crossing sidewalk
@@ -217,25 +219,25 @@ AFRAME.registerComponent('intersection', {
     // describe curb parameters
     const curbParams = {
       northeast: {
-        positionVec: { x: intersectWidth / 2 - northeastcurbArray[0] / 2, y: intersectDepth / 2 - northeastcurbArray[1] / 2 },
+        positionVec: { x: intersectWidth / 2 - northeastcurbArray[0] / 2, y: intersectDepth / 2 - northeastcurbArray[1] / 2, z: 0.1 },
         rotationVec: { x: 0, y: 90, z: -90 },
         length: northeastcurbArray[0],
         width: northeastcurbArray[1]
       },
       southwest: {
-        positionVec: { x: -intersectWidth / 2 + southwestcurbArray[0] / 2, y: -intersectDepth / 2 + southwestcurbArray[1] / 2 },
+        positionVec: { x: -intersectWidth / 2 + southwestcurbArray[0] / 2, y: -intersectDepth / 2 + southwestcurbArray[1] / 2, z: 0.1 },
         rotationVec: { x: 0, y: 90, z: -90 },
         length: southwestcurbArray[0],
         width: southwestcurbArray[1]
       },
       southeast: {
-        positionVec: { x: intersectWidth / 2 - southeastcurbArray[0] / 2, y: -intersectDepth / 2 + southeastcurbArray[1] / 2 },
+        positionVec: { x: intersectWidth / 2 - southeastcurbArray[0] / 2, y: -intersectDepth / 2 + southeastcurbArray[1] / 2, z: 0.1 },
         rotationVec: { x: 0, y: 90, z: -90 },
         length: southeastcurbArray[0],
         width: southeastcurbArray[1]
       },
       northwest: {
-        positionVec: { x: -intersectWidth / 2 + northwestcurbArray[0] / 2, y: intersectDepth / 2 - northwestcurbArray[1] / 2 },
+        positionVec: { x: -intersectWidth / 2 + northwestcurbArray[0] / 2, y: intersectDepth / 2 - northwestcurbArray[1] / 2, z: 0.1 },
         rotationVec: { x: 0, y: 90, z: -90 },
         length: northwestcurbArray[0],
         width: northwestcurbArray[1]
@@ -251,28 +253,28 @@ AFRAME.registerComponent('intersection', {
 
     if (stopsignArray[0]) {
       const ss1 = document.createElement('a-entity');
-      ss1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.03 });
+      ss1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.1 });
       ss1.setAttribute('rotation', { x: 0, y: 90, z: 90 });
       ss1.setAttribute('mixin', 'stop_sign');
       el.appendChild(ss1);
     }
     if (stopsignArray[1]) {
       const ss2 = document.createElement('a-entity');
-      ss2.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.03 });
+      ss2.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.1 });
       ss2.setAttribute('rotation', { x: 0, y: -90, z: -90 });
       ss2.setAttribute('mixin', 'stop_sign');
       el.appendChild(ss2);
     }
     if (stopsignArray[2]) {
       const ss3 = document.createElement('a-entity');
-      ss3.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.03 });
+      ss3.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.1 });
       ss3.setAttribute('rotation', { x: -90, y: 90, z: 90 });
       ss3.setAttribute('mixin', 'stop_sign');
       el.appendChild(ss3);
     }
     if (stopsignArray[3]) {
       const ss4 = document.createElement('a-entity');
-      ss4.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.03 });
+      ss4.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.1 });
       ss4.setAttribute('rotation', { x: 90, y: -90, z: -90 });
       ss4.setAttribute('mixin', 'stop_sign');
       el.appendChild(ss4);
@@ -280,48 +282,48 @@ AFRAME.registerComponent('intersection', {
 
     if (trafficsignalArray[0]) {
       const ts1 = document.createElement('a-entity');
-      ts1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.03 });
+      ts1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.3 });
       ts1.setAttribute('rotation', { x: 210, y: 90, z: 90 });
       ts1.setAttribute('mixin', 'signal_left');
       el.appendChild(ts1);
       const ts2 = document.createElement('a-entity');
-      ts2.setAttribute('position', { x: intersectWidth / 2, y: -intersectDepth / 3, z: 0.03 });
+      ts2.setAttribute('position', { x: intersectWidth / 2, y: -intersectDepth / 3, z: 0.3 });
       ts2.setAttribute('rotation', { x: 180, y: 90, z: 90 });
       ts2.setAttribute('mixin', 'signal_right');
       el.appendChild(ts2);
     }
     if (trafficsignalArray[1]) {
       const ts3 = document.createElement('a-entity');
-      ts3.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.03 });
+      ts3.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.3 });
       ts3.setAttribute('rotation', { x: 30, y: 90, z: 90 });
       ts3.setAttribute('mixin', 'signal_left');
       el.appendChild(ts3);
       const ts4 = document.createElement('a-entity');
-      ts4.setAttribute('position', { x: -intersectWidth / 2, y: intersectDepth / 3, z: 0.03 });
+      ts4.setAttribute('position', { x: -intersectWidth / 2, y: intersectDepth / 3, z: 0.3 });
       ts4.setAttribute('rotation', { x: 0, y: 90, z: 90 });
       ts4.setAttribute('mixin', 'signal_right');
       el.appendChild(ts4);
     }
     if (trafficsignalArray[2]) {
       const ts5 = document.createElement('a-entity');
-      ts5.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.03 });
+      ts5.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.1 });
       ts5.setAttribute('rotation', { x: 120, y: 90, z: 90 });
       ts5.setAttribute('mixin', 'signal_left');
       el.appendChild(ts5);
       const ts6 = document.createElement('a-entity');
-      ts6.setAttribute('position', { x: intersectWidth / 3, y: intersectDepth / 2, z: 0.03 });
+      ts6.setAttribute('position', { x: intersectWidth / 3, y: intersectDepth / 2, z: 0.1 });
       ts6.setAttribute('rotation', { x: 90, y: 90, z: 90 });
       ts6.setAttribute('mixin', 'signal_right');
       el.appendChild(ts6);
     }
     if (trafficsignalArray[3]) {
       const ts7 = document.createElement('a-entity');
-      ts7.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.03 });
+      ts7.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.1 });
       ts7.setAttribute('rotation', { x: -60, y: 90, z: 90 });
       ts7.setAttribute('mixin', 'signal_left');
       el.appendChild(ts7);
       const ts8 = document.createElement('a-entity');
-      ts8.setAttribute('position', { x: -intersectWidth / 3, y: -intersectDepth / 2, z: 0.03 });
+      ts8.setAttribute('position', { x: -intersectWidth / 3, y: -intersectDepth / 2, z: 0.1 });
       ts8.setAttribute('rotation', { x: -90, y: 90, z: 90 });
       ts8.setAttribute('mixin', 'signal_right');
       el.appendChild(ts8);
@@ -329,7 +331,7 @@ AFRAME.registerComponent('intersection', {
 
     if (crosswalklArray[0]) {
       const cw1 = document.createElement('a-entity');
-      cw1.setAttribute('position', { x: intersectWidth / 2 - 2, z: 0.013 });
+      cw1.setAttribute('position', { x: intersectWidth / 2 - 2, z: 0.11 });
       cw1.setAttribute('rotation', { x: 0, y: 0, z: 180 });
       cw1.setAttribute('scale', { y: intersectDepth / 12 });
       cw1.setAttribute('mixin', 'markings crosswalk-zebra');
@@ -337,7 +339,7 @@ AFRAME.registerComponent('intersection', {
     }
     if (crosswalklArray[1]) {
       const cw2 = document.createElement('a-entity');
-      cw2.setAttribute('position', { x: -intersectWidth / 2 + 2, z: 0.012 });
+      cw2.setAttribute('position', { x: -intersectWidth / 2 + 2, z: 0.11 });
       cw2.setAttribute('rotation', { x: 0, y: 0, z: 180 });
       cw2.setAttribute('scale', { y: intersectDepth / 12 });
       cw2.setAttribute('mixin', 'markings crosswalk-zebra');
@@ -345,7 +347,7 @@ AFRAME.registerComponent('intersection', {
     }
     if (crosswalklArray[2]) {
       const cw3 = document.createElement('a-entity');
-      cw3.setAttribute('position', { y: -intersectDepth / 2 + 2, z: 0.011 });
+      cw3.setAttribute('position', { y: -intersectDepth / 2 + 2, z: 0.11 });
       cw3.setAttribute('rotation', { x: 0, y: 0, z: 90 });
       cw3.setAttribute('scale', { y: intersectWidth / 12 });
       cw3.setAttribute('mixin', 'markings crosswalk-zebra');
@@ -353,7 +355,7 @@ AFRAME.registerComponent('intersection', {
     }
     if (crosswalklArray[3]) {
       const cw4 = document.createElement('a-entity');
-      cw4.setAttribute('position', { y: intersectDepth / 2 - 2, z: 0.01 });
+      cw4.setAttribute('position', { y: intersectDepth / 2 - 2, z: 0.11 });
       cw4.setAttribute('rotation', { x: 0, y: 0, z: 90 });
       cw4.setAttribute('scale', { y: intersectWidth / 12 });
       cw4.setAttribute('mixin', 'markings crosswalk-zebra');

From 2ceae96da1ab55bb9b31b9dac89a3e12847666ad Mon Sep 17 00:00:00 2001
From: Alexander Goryushkin <aleotu@gmail.com>
Date: Tue, 5 Sep 2023 23:10:19 -0300
Subject: [PATCH 2/4] Update json-utils.js

---
 src/json-utils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/json-utils.js b/src/json-utils.js
index 760c96060..76b6c53fa 100644
--- a/src/json-utils.js
+++ b/src/json-utils.js
@@ -130,7 +130,8 @@ const removeProps = {
 // a list of component_name:new_component_name pairs to rename in JSON string
 const renameProps = {
   'streetmix-loader': 'not-streetmix-loader',
-  street: 'not-street'
+  street: 'not-street',
+  intersection: 'not-intersection'
 };
 
 function filterJSONstreet (removeProps, renameProps, streetJSON) {

From 6f4c23b5fea91f85539b40e69b56e22f501f60d3 Mon Sep 17 00:00:00 2001
From: Alexander Goryushkin <aleotu@gmail.com>
Date: Thu, 7 Sep 2023 15:30:16 -0300
Subject: [PATCH 3/4] add intesection scene for deploy-preview test

---
 index-intersection.html | 227 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 227 insertions(+)
 create mode 100644 index-intersection.html

diff --git a/index-intersection.html b/index-intersection.html
new file mode 100644
index 000000000..1151b0779
--- /dev/null
+++ b/index-intersection.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- aframe -->
+    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
+
+    <!-- 3dstreet -->
+    <script src="https://github.3dstreet.org/dist/aframe-street-component.js"></script>
+
+    <!-- user controls - vr teleport -->
+
+    <!-- mapbox -->
+    <script src="https://github.3dstreet.org/src/lib/aframe-mapbox-component.min.js"></script>
+
+    <!-- save / load -->
+    <script src="https://github.3dstreet.org/src/json-utils.js"></script>
+    
+    <!-- ocean -->
+    <script src="https://github.3dstreet.org/src/components/ocean-plane.js"></script>
+
+    <title>3DStreet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="assets/ui_assets/favicon.ico">
+    <link rel="stylesheet" href="//github.3dstreet.org/src/viewer-styles.css">
+  </head>
+
+  <body>
+    <!-- viewer ui start -->
+    <div class="viewer-header-wrapper">
+      <button class="viewer-logo-start-editor-button" onclick="startEditor()">
+        <img class="viewer-logo-img" alt="3DStreet Viewer" src="./assets/3DStreet-Viewer-Start-Editor.svg">
+      </button>
+    </div>
+
+    <div class="right-fixed">
+      <ul class="right-menu">
+        <li onclick="screenshot()"> <a class="camera"  href="#"> <span> Capture image as PNG </span> <img src="//github.3dstreet.org/ui_assets/camera-icon.svg"> </a></li>
+        <li onclick="inputStreetmix()"> <a class="load"  href="#"> <span> Load Streetmix URL </span> <img src="//github.3dstreet.org/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="//github.3dstreet.org/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="//github.3dstreet.org/ui_assets/vr-icon.svg"> </a></li>
+      </ul>
+    </div>
+
+    <a-scene
+      vr-mode-ui="enterVRButton: #custom-enter-vr-button;"
+      vr-mode-ui-if-headset
+      renderer="colorManagement: true; physicallyCorrectLights: true;"
+      gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/versioned/decoders/1.4.3/"
+      inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
+      timed-inspector="2"
+      notify
+      >
+      <a-assets>
+        <!-- you can specify a custom asset path using below syntax  -->
+        <!-- <streetmix-assets url="./assets/"></streetmix-assets> -->
+      </a-assets>
+  
+      <a-entity id="cameraRig" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true">
+        <a-entity id="camera" camera="near: 1; far: 1000" position="0 1.6 0"></a-entity>
+        <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity>
+        <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity>
+      </a-entity>
+
+      <a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>
+
+      <a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children>
+        <a-entity
+          data-layer-name="16th Street West of SVN"
+          position="-96.980 0 -4.17918"
+          rotation="0 90 0"
+          id="east_street"
+          street="length: 150"
+          streetmix-loader="streetmixStreetURL: https://streetmix.net/kfarr/82/16th-st-harrison-st-sf-ca; showBuildings: true;"
+          ></a-entity>
+        <a-entity
+          data-layer-name="16th Street East of SVN"
+          position="78.165 0 -4.17918"
+          rotation="0 90 0"
+          id="west_street"
+          street="length: 150"
+          streetmix-loader="streetmixStreetURL: https://streetmix.net/kfarr/82/16th-st-harrison-st-sf-ca; showBuildings: true;"
+        ></a-entity>
+
+        <a-entity data-layer-name="16th & Harrison St Intersection" id="intersection" position="-9.917 0 -4.057">
+          <a-entity
+            intersection="dimensions: 27.5 24.384;northeastcurb: 4.572 4.572;southwestcurb: 4.572 4.572;southeastcurb: 4.572 4.572;northwestcurb: 4.572 4.572;trafficsignal: 1 1 1 1;crosswalk: 1 1 1 1"
+          ></a-entity>
+        </a-entity>
+
+        <a-entity
+          data-layer-name="SVN North of 16th St"
+          position="-9.23383 0 -31.340"
+          rotation="0 0 0"
+          id="south_street"
+          street="length: 30"
+          streetmix-loader="streetmixStreetURL: https://streetmix.net/scott/31/south-van-ness-idea-short-term; showBuildings: false;"
+        ></a-entity>
+
+        <a-entity
+          data-layer-name="SVN South of 16th St"
+          position="-9.23383 0 23.009"
+          rotation="0 180 0"
+          id="north_street"
+          street="length: 30"
+          streetmix-loader="streetmixStreetURL: https://streetmix.net/scott/31/south-van-ness-idea-short-term; showBuildings: false;"
+        ></a-entity>
+
+      </a-entity>
+
+      <a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children>
+
+        
+      </a-entity>
+    </a-scene>
+  </body>
+  <script>
+    // only show VR button if headset connected
+    AFRAME.registerComponent('vr-mode-ui-if-headset', {
+      dependencies: ['vr-mode-ui'],
+      init: function () {
+        if (!AFRAME.utils.device.checkHeadsetConnected()) {
+          this.el.setAttribute('vr-mode-ui', 'enabled', false);
+        }
+      }
+    })
+
+    AFRAME.registerComponent('set-loader-from-hash', {
+      dependencies: ['streetmix-loader'],
+      schema: {
+        defaultURL: { type: 'string' }
+      },
+      init: function () {
+        // get hash from window
+        const streetURL = window.location.hash.substring(1);
+        if (streetURL !== undefined && streetURL.length > 0) {
+          console.log('[set-loader-from-hash]','Using URL from hash', streetURL)
+          this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', streetURL);
+        }
+        // else {
+        //   console.log('[set-loader-from-hash]','Using default URL', this.data.defaultURL)
+        //   this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', this.data.defaultURL);
+        // }
+      }
+    });
+
+    function screenshot() {
+      AFRAME.scenes[0].setAttribute('screenshot','width',AFRAME.scenes[0].canvas.width)
+      AFRAME.scenes[0].setAttribute('screenshot','height',AFRAME.scenes[0].canvas.height)
+      document.querySelector('a-scene').components.screenshot.capture('perspective');
+    }
+
+    function startEditor() {
+      var sceneEl = document.querySelector('a-scene');
+      sceneEl.components.inspector.openInspector();
+      document.querySelector('.viewer-header-wrapper').style.display = 'none';
+    }
+
+    AFRAME.registerComponent('timed-inspector', {
+      init: function() {
+        setTimeout( function () {
+          window.postMessage('INJECT_AFRAME_INSPECTOR')
+        }, this.data * 1000)
+      }
+    });    
+
+    function inputStreetmix() {
+      streetmixURL = prompt("Please enter a Streetmix URL", "https://streetmix.net/kfarr/3/example-street");
+      setTimeout(function() { window.location.hash = streetmixURL; });
+      streetContainerEl = document.getElementById('street-container');
+      while (streetContainerEl.firstChild) {
+        streetContainerEl.removeChild(streetContainerEl.lastChild);
+      }
+      streetContainerEl.innerHTML = '<a-entity street streetmix-loader="streetmixStreetURL: '+streetmixURL+'""></a-entity>';
+    }
+
+    // JSON loading starts here
+    function getValidJSON(stringJSON) {
+      // Preserve newlines, etc. - use valid JSON
+      // Remove non-printable and other non-valid JSON characters
+      return stringJSON.replace(/\'/g, "")
+                       .replace(/\n/g, "")
+                       .replace(/[\u0000-\u0019]+/g,"");
+    }
+    
+    function createElementsFromJSON(streetJSONString) {
+      const validJSONString = getValidJSON(streetJSONString);
+      streetContainerEl = document.getElementById('street-container');
+      while (streetContainerEl.firstChild) {
+        streetContainerEl.removeChild(streetContainerEl.lastChild);
+      }
+      var streetObject = JSON.parse(validJSONString);
+      createEntities(streetObject.data, streetContainerEl);
+    }
+
+    function inputJSON() {
+      const stringJSON = prompt("Please paste 3DStreet JSON string");
+      if (stringJSON) {
+        createElementsFromJSON(stringJSON);
+      }      
+    }
+
+    function fileJSON() {
+      let reader=new FileReader();
+      reader.onload=function(){
+        createElementsFromJSON(reader.result);
+      }
+      reader.readAsText(this.files[0]);
+    }
+
+    document.getElementById('inputfile')
+            .addEventListener('change', fileJSON);
+  </script>
+  <!-- <script src="./dist/3dstreet-editor.js"></script> -->
+
+  <!-- Google Analytics - Global site tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-T65XPDLZ3F"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-T65XPDLZ3F');
+
+    gtag('event', 'ga_init');
+  </script>
+</html>

From 5252f283b3957f265c2186b95e8d29575030a1bb Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Thu, 7 Sep 2023 23:11:36 -0700
Subject: [PATCH 4/4] quick lint fix

---
 src/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index df257f91f..9d71b3110 100644
--- a/src/index.js
+++ b/src/index.js
@@ -128,7 +128,7 @@ AFRAME.registerComponent('intersection', {
     // remove all child nodes if exists
     while (el.firstChild) {
       el.removeChild(el.lastChild);
-    }    
+    }
     const dimensionsArray = data.dimensions.split(' ').map((i) => Number(i));
     const positionArray = [this.el.getAttribute('position').x, this.el.getAttribute('position').y, this.el.getAttribute('position').z];
     const sidewalkArray = data.sidewalk.split(' ').map((i) => Number(i));
@@ -144,7 +144,7 @@ AFRAME.registerComponent('intersection', {
     const intersectDepth = dimensionsArray[1];
 
     this.el.setAttribute('geometry', `primitive:box; width: ${intersectWidth}; height: ${intersectDepth}; depth:0.2`);
-    this.el.setAttribute('position', { x: positionArray[0], y: - 0.1, z: positionArray[2] });
+    this.el.setAttribute('position', { x: positionArray[0], y: -0.1, z: positionArray[2] });
     this.el.setAttribute('rotation', '-90 0 0');
     this.el.setAttribute('material', 'src: #asphalt-texture; repeat:5 5; roughness:1');