Merge branch 'main' into remove-element-tag-and-class

.prettierrc.json

@@ -1,5 +1,6 @@
 {
   "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
   "singleQuote": true,
   "trailingComma": "none"
 }

index.html

@@ -35,16 +35,6 @@
   <!-- loading animation start -->
   <div class="loader__wrapper">
     <div class="loader">
-      <div class="entities">
-        <img src="./ui_assets/loader/entities.svg" alt="entities" />
-      </div>
-      <div class="transport">
-        <div class="wrapper__transport">
-          <img src="./ui_assets/loader/car.svg" class="car" alt="car" />
-          <img src="./ui_assets/loader/bus.svg" class="bus" alt="bus" />
-          <img src="./ui_assets/loader/bike.svg" class="bike" alt="bike" />
-        </div>
-      </div>
       <div class="road">Loading 3DStreet</div>
     </div>
   </div>
@@ -76,8 +66,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 +119,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

@@ -4,7 +4,7 @@
   "description": "Web-based 3D visualization of streets using A-Frame and WebXR",
   "main": "dist/3dstreet-editor.js",
   "scripts": {
-    "start": "npm run watch:css & webpack serve --config webpack.config.js --open --progress",
+    "start": "webpack serve --config webpack.config.js --open --progress",
     "start:prod": "npm run dist && npm run prefirebase && serve public -l 3333",
     "dist": "webpack --config webpack.prod.config.js --progress",
     "dist:staging": "cross-env DEPLOY_ENV=development webpack --config webpack.prod.config.js --progress",
@@ -19,9 +19,7 @@
     "deploy:staging": "npm run dist:staging && npm run prefirebase && cd public && firebase use dev-3dstreet && firebase deploy --only hosting:dev-3dstreet",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "emulator": "npm run dist:staging && npm run prefirebase && cd public && firebase emulators:start",
-    "build:css": "tailwindcss -i ./src/styles/tailwind.css -o ./dist/tailwind.css",
-    "watch:css": "tailwindcss -i ./src/styles/tailwind.css -o ./dist/tailwind.css --watch"
+    "emulator": "npm run dist:staging && npm run prefirebase && cd public && firebase emulators:start"
   },
   "repository": "3dstreet/3dstreet",
   "author": "[email protected]",
@@ -48,11 +46,11 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-ga4": "^2.1.0",
     "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",
@@ -90,6 +88,7 @@
     "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "pretty": "^2.0.0",
     "resolve-url-loader": "^5.0.0",
     "rewire": "^7.0.0",

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/Collapsible.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { sendMetric } from '../services/ga';
 
 export default class Collapsible extends React.Component {
   static propTypes = {
@@ -27,7 +26,6 @@ export default class Collapsible extends React.Component {
     // Don't collapse if we click on actions like clipboard
     if (event.target.nodeName === 'A') return;
     this.setState({ collapsed: !this.state.collapsed });
-    sendMetric('Components', 'collapse');
   };
 
   render() {

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">
@@ -316,7 +315,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/Component.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import PropertyRow from './PropertyRow';
 import React from 'react';
 import { getComponentClipboardRepresentation } from '../../lib/entity';
-import { sendMetric } from '../../services/ga';
 
 const isSingleProperty = AFRAME.schema.isSingleProperty;
 
@@ -45,7 +44,6 @@ export default class Component extends React.Component {
           var componentName = trigger
             .getAttribute('data-component')
             .toLowerCase();
-          sendMetric('Components', 'copyComponentToClipboard', componentName);
           return getComponentClipboardRepresentation(
             this.state.entity,
             componentName
@@ -85,7 +83,6 @@ export default class Component extends React.Component {
         entity: this.props.entity,
         component: componentName
       });
-      sendMetric('Components', 'removeComponent', componentName);
     }
   };
 

src/editor/components/components/Logo/Logo.component.jsx

@@ -9,7 +9,7 @@ import styles from './Logo.module.scss';
  * @category Components
  */
 const Logo = ({ onToggleEdit, isEditor }) => (
-  <div className="flex items-center space-x-2">
+  <div className="flex items-center gap-2">
     <div className={styles.logo} id="logoImg">
       <img src="ui_assets/3D-St-stacked-128.png" alt="3DStreet Logo" />
     </div>