WIP

src/assets.js

@@ -315,38 +315,57 @@ class StreetAssets extends AFRAME.ANode {
   }
 }
 customElements.define('street-assets', StreetAssets);
-
-// add street-assets to scene if it doesn't already exist
-var domModifiedHandler = function (evt) {
-  // Only care about events affecting an a-scene
-  if (evt.target.nodeName !== 'A-SCENE') return;
-
-  // Try to find the a-assets element in the a-scene
-  let assets = evt.target.querySelector('a-assets');
+// Function to add street-assets if it doesn't already exist
+function addStreetAssets(scene) {
+  let assets = scene.querySelector('a-assets');
 
   if (!assets) {
-    // attempt to create and add the assets if they don't already exist
-    // TODO: this doesn't work well with images, so scenes must include <a-assets></a-assets> to run correctly
     assets = document.createElement('a-assets');
-    evt.target.append(assets);
+    scene.appendChild(assets);
   }
 
-  // Already have the streetmix assets. No need to add them
-  if (assets.querySelector('street-assets')) {
-    document.removeEventListener('DOMSubtreeModified', domModifiedHandler);
-    return;
+  if (!assets.querySelector('street-assets')) {
+    const streetAssets = document.createElement('street-assets');
+    assets.appendChild(streetAssets);
   }
+}
 
-  // Create and add the custom street-assets element
-  const streetAssets = document.createElement('street-assets');
-  assets.append(streetAssets);
-
-  // Clean up by removing the event listener
-  document.removeEventListener('DOMSubtreeModified', domModifiedHandler);
-};
+// Set up the MutationObserver
+const observer = new MutationObserver((mutations) => {
+  for (const mutation of mutations) {
+    if (mutation.type === 'childList') {
+      const addedNodes = mutation.addedNodes;
+      for (const node of addedNodes) {
+        if (node.nodeName === 'A-SCENE') {
+          addStreetAssets(node);
+          // We've found and processed an a-scene, so we can disconnect the observer
+          observer.disconnect();
+          return;
+        }
+      }
+    }
+  }
+});
 
-document.addEventListener('DOMSubtreeModified', domModifiedHandler, false);
+// Function to start observing
+function startObserving() {
+  // Immediate check in case the a-scene is already in the DOM
+  const existingScene = document.querySelector('a-scene');
+  if (existingScene) {
+    addStreetAssets(existingScene);
+  } else {
+    // Start observing the document with the configured parameters
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+}
 
+// Wait for the DOM to be fully loaded before starting the observer
+if (document.readyState !== 'complete') {
+  document.addEventListener('DOMContentLoaded', startObserving);
+} else {
+  // DOMContentLoaded has already fired
+  startObserving();
+}
 /*
 Unused assets kept commented here for future reference
         <!-- audio -->

src/editor/components/Main.js

@@ -20,6 +20,8 @@ import { ScenesModal } from './modals/ScenesModal';
 import { PaymentModal } from './modals/PaymentModal';
 import { SceneEditTitle } from './components/SceneEditTitle';
 import { AddLayerPanel } from './components/AddLayerPanel';
+import { removeEntity } from '../lib/entity.js';
+
 import posthog from 'posthog-js';
 
 THREE.ImageUtils.crossOrigin = '';
@@ -38,6 +40,7 @@ export default class Main extends Component {
       isProfileModalOpened: false,
       isAddLayerPanelOpen: false,
       isGeoModalOpened: false,
+      geoEnabled: false,
       isScenesModalOpened: !isStreetLoaded,
       isPaymentModalOpened: isPaymentModalOpened,
       sceneEl: AFRAME.scenes[0],
@@ -172,6 +175,7 @@ export default class Main extends Component {
   };
 
   onCloseSignInModal = () => {
+    console.log('closed');
     this.setState({ isSignInModalOpened: false });
   };
 
@@ -183,13 +187,32 @@ export default class Main extends Component {
     this.setState({ isProfileModalOpened: false });
   };
 
-  onCloseGeoModal = () => {
-    this.setState({ isGeoModalOpened: false });
+  onCloseGeoModal = (user) => {
+    console.log('im running geo');
+    if (!user) {
+      this.setState({ isSignInModalOpened: true });
+    } else if (user && !user.isPro) {
+      this.setState({
+        isGeoModalOpened: false,
+        isPaymentModalOpened: true,
+        geoEnabled: true
+      });
+    }
   };
 
-  onClosePaymentModal = () => {
+  onClosePaymentModal = (user) => {
+    console.log('im running');
+
     window.location.hash = '#';
     this.setState({ isPaymentModalOpened: false });
+    if (!user.isPro && this.state.geoEnabled) {
+      STREET.notify.warningMessage('geospatial features require pro plan');
+      const element = document.querySelector(
+        '[data-layer-name="Google 3D Tiles"]'
+      );
+      removeEntity(element, true);
+      this.setState({ geoEnabled: false });
+    }
   };
 
   toggleEdit = () => {

src/editor/components/components/AddLayerPanel/createLayerFunctions.js

@@ -98,6 +98,7 @@ function create3DTiles() {
       latitude: ${latitude}; longitude: ${longitude}; elevation: ${elevation}; maps: google3d
     `
     );
+    console.log(geoLayer);
     // update sceneGraph
     Events.emit('entitycreated', geoLayer);
   };

src/editor/components/components/GeoPanel/GeoPanel.component.jsx

@@ -12,13 +12,14 @@ import posthog from 'posthog-js';
 const GeoPanel = () => {
   const { currentUser } = useAuthContext();
   const onClick = () => {
-    posthog.capture('geo_panel_clicked');
+    posthog.capture('geo_panel_clicked', { user_id: currentUser?.uid });
     if (!currentUser) {
+      STREET.notify.warningMessage(
+        'Please sign in to use geospatial features.'
+      );
       Events.emit('opensigninmodal');
-    } else if (currentUser.isPro) {
-      Events.emit('opengeomodal');
     } else {
-      Events.emit('openpaymentmodal');
+      Events.emit('opengeomodal');
     }
   };
 

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

@@ -1,11 +1,12 @@
 import { useState, useCallback, useEffect } from 'react';
+import { useAuthContext } from '../../../contexts/index.js';
 
 import styles from './GeoModal.module.scss';
 import { Mangnifier20Icon, Save24Icon, QR32Icon } from '../../../icons';
 
 import { firebaseConfig } from '../../../services/firebase.js';
 import Modal from '../Modal.jsx';
-import { Button, Input } from '../../components/index.js';
+import { Button, Input, Toggle } from '../../components/index.js';
 import {
   GoogleMap,
   useJsApiLoader,
@@ -15,19 +16,25 @@ import {
 import GeoImg from '../../../../../ui_assets/geo.png';
 import { roundCoord } from '../../../../../src/utils.js';
 import { QrCode } from '../../components/QrCode/QrCode.component.jsx';
+import {
+  create3DTiles,
+  createMapbox
+} from '../../components/AddLayerPanel/createLayerFunctions.js';
 
 const GeoModal = ({ isOpen, onClose }) => {
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: firebaseConfig.apiKey
   });
 
+  const { currentUser } = useAuthContext();
   const [markerPosition, setMarkerPosition] = useState({
     lat: 37.7637072, // lat: 37.76370724481858, lng: -122.41517686259827
     lng: -122.4151768
   });
   const [elevation, setElevation] = useState(10);
   const [autocomplete, setAutocomplete] = useState(null);
   const [qrCodeUrl, setQrCodeUrl] = useState(null);
+  const [is3D, setIs3D] = useState(true);
 
   useEffect(() => {
     if (isOpen) {
@@ -92,6 +99,9 @@ const GeoModal = ({ isOpen, onClose }) => {
     setElevation(newElevation);
   };
 
+  const handle3DToggle = (value) => {
+    setIs3D(value);
+  };
   const onAutocompleteLoad = useCallback((autocompleteInstance) => {
     setAutocomplete(autocompleteInstance);
   }, []);
@@ -111,10 +121,11 @@ const GeoModal = ({ isOpen, onClose }) => {
   }, [autocomplete]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const onCloseCheck = (evt) => {
+    console.log('running check');
     // do not close geoModal when clicking on a list with suggestions for addresses
     const autocompleteContatiner = document.querySelector('.pac-container');
     if (autocompleteContatiner.children.length === 0) {
-      onClose();
+      onClose(currentUser);
     }
   };
 
@@ -145,8 +156,13 @@ const GeoModal = ({ isOpen, onClose }) => {
       'street-geo',
       `latitude: ${latitude}; longitude: ${longitude}; elevation: ${elevation}`
     );
-
-    onClose();
+    if (is3D) {
+      create3DTiles();
+    } else {
+      createMapbox();
+    }
+    console.log(currentUser);
+    onClose(currentUser);
   };
 
   return (
@@ -211,6 +227,14 @@ const GeoModal = ({ isOpen, onClose }) => {
               onChange={handleElevationChange}
             ></Input>
           </div>
+          <div>
+            <p>3D Enabled</p>
+            <Toggle
+              status={is3D}
+              onChange={handle3DToggle}
+              label={{ text: 'Google 3D Tiles' }}
+            />
+          </div>
         </div>
 
         {qrCodeUrl && (
@@ -238,7 +262,7 @@ const GeoModal = ({ isOpen, onClose }) => {
             variant="filled"
             onClick={onSaveHandler}
           >
-            Update Scene Location
+            Update Scene
           </Button>
         </div>
       </div>

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

@@ -58,12 +58,15 @@ const PaymentModal = ({ isOpen, onClose }) => {
     setIsLoading(false);
   };
 
+  const closeWrapper = () => {
+    onClose(currentUser);
+  };
+
   return (
     <Modal
       className={styles.modalWrapper}
       isOpen={isOpen}
-      onClose={onClose}
-      extraCloseKeyCode={72}
+      onClose={closeWrapper}
     >
       <div className={styles.paymentDetails}>
         <h3>Unlock Geospatial Features with 3DStreet Pro</h3>

src/editor/contexts/Auth.context.js

@@ -36,6 +36,7 @@ const AuthProvider = ({ children }) => {
     };
 
     const unsubscribe = auth.onAuthStateChanged((user) => {
+      console.log('auth changed');
       fetchUserData(user);
     });