Change street component parameters

.eslintignore

@@ -1,2 +1,5 @@
 src/editor/lib/TransformControls.js
 src/lib/
+public
+dist
+.storybook/

src/assets.js

@@ -239,14 +239,16 @@ function buildAssetHTML(assetUrl, categories) {
         <a-asset-item id="fence-model" src="${assetUrl}sets/fences/gltf-exports/draco/fence4.glb"></a-asset-item>
         <a-mixin shadow id="fence" gltf-model="#fence-model" scale="0.1 0.1 0.1"></a-mixin>
       `,
-    'loud-bicycle': `
-        <!-- loud-bicycle-game -->
+    cyclists: `
         <a-mixin shadow id="cyclist-cargo" gltf-model="url(${assetUrl}sets/cargo-bike-animation/gltf-exports/draco/cargo_bike_animation_v1.glb)"></a-mixin>
         <a-mixin shadow id="cyclist1" gltf-model="url(${assetUrl}sets/cyclist-animation/gltf-exports/draco/cyclist-1-animation-v1.glb)"></a-mixin>
         <a-mixin shadow id="cyclist2" gltf-model="url(${assetUrl}sets/cyclist-animation/gltf-exports/draco/cyclist-2-animation-v1.glb)"></a-mixin>
         <a-mixin shadow id="cyclist3" gltf-model="url(${assetUrl}sets/cyclist-animation/gltf-exports/draco/cyclist-3-animation-v1.glb)"></a-mixin>
         <a-mixin shadow id="cyclist-kid" gltf-model="url(${assetUrl}sets/cyclist-animation/gltf-exports/draco/Kid_cyclist_animation_v01.glb)"></a-mixin>
         <a-mixin shadow id="cyclist-dutch" gltf-model="url(${assetUrl}sets/cyclist-animation/gltf-exports/draco/Dutch_cyclist_animation_v01.glb)"></a-mixin>
+      `,
+    'loud-bicycle': `
+        <!-- loud-bicycle-game -->
         <a-mixin shadow id="loud-bicycle-mini" gltf-model="url(${assetUrl}sets/cycle-horn/gltf-exports/draco/loud-bicycle-mini-horn.glb)"></a-mixin>
         <a-mixin shadow id="loud-bicycle-classic" gltf-model="url(${assetUrl}sets/cycle-horn/gltf-exports/draco/loud-bicycle-classic-horn.glb)"></a-mixin>
         <a-mixin shadow id="building-school" gltf-model="url(${assetUrl}sets/school-building/gltf-exports/draco/school-building.glb)"></a-mixin>

src/components/streetplan-loader.js

@@ -8,7 +8,8 @@ AFRAME.registerComponent('streetplan-loader', {
     streetplanAPIURL: { type: 'string' },
     streetplanEncJSON: { type: 'string' },
     showBuildings: { default: true },
-    name: { default: '' }
+    name: { default: '' },
+    synchronize: { default: false }
   },
   streetplanResponseParse: function (streetplanResponseObject) {
     const el = this.el;
@@ -62,6 +63,9 @@ AFRAME.registerComponent('streetplan-loader', {
     const that = this;
     const data = this.data;
 
+    // do not call the update function when the data.synchronize is set to false
+    if (!data.synchronize) return;
+
     // load from URL encoded Streetplan JSON
     if (data.streetplanEncJSON) {
       const streetplanJSON = decodeURIComponent(data.streetplanEncJSON);
@@ -87,6 +91,8 @@ AFRAME.registerComponent('streetplan-loader', {
         // Connection success
         const streetplanResponseObject = JSON.parse(this.response);
         that.streetplanResponseParse(streetplanResponseObject);
+        // the streetplan data has been loaded, set the synchronize flag to false
+        that.el.setAttribute('streetplan-loader', 'synchronize', false);
       } else {
         // We reached our target server, but it returned an error
         console.log(

src/index.js

@@ -7,7 +7,7 @@ if (typeof VERSION !== 'undefined') {
 var streetmixParsers = require('./aframe-streetmix-parsers');
 var streetmixUtils = require('./tested/streetmix-utils');
 require('./json-utils_1.1.js');
-require('./street-utils.js');
+var streetUtils = require('./street-utils.js');
 require('./components/gltf-part');
 require('./components/ocean');
 require('./components/svg-extruder.js');
@@ -32,11 +32,45 @@ AFRAME.registerComponent('street', {
     showStriping: { default: true },
     showVehicles: { default: true },
     globalAnimated: { default: false },
-    length: { default: 60 } // new default of 60 from 0.4.4
+    length: { default: 60 }, // new default of 60 from 0.4.4
+    synchronize: { default: true }
+  },
+  toggleEntitiesVisibillity: function (entitiesArray, visible) {
+    entitiesArray.forEach((entity) => entity.setAttribute('visible', visible));
+  },
+  toggleVehicles: function (showVehicles) {
+    const vehicleEntities = streetUtils.getVehicleEntities();
+    this.toggleEntitiesVisibillity(vehicleEntities, showVehicles);
+  },
+  toggleGround: function (showGround) {
+    const groundEntities = Array.from(
+      document.querySelectorAll('.ground-left, .ground-right')
+    );
+    this.toggleEntitiesVisibillity(groundEntities, showGround);
+  },
+  toggleStriping: function (showStriping) {
+    const stripingEntities = streetUtils.getStripingEntities();
+    this.toggleEntitiesVisibillity(stripingEntities, showStriping);
   },
   update: function (oldData) {
-    // fired once at start and at each subsequent change of a schema value
-    var data = this.data;
+    const data = this.data;
+
+    if (data.showGround !== oldData.showGround) {
+      this.toggleGround(data.showGround);
+    }
+
+    if (data.showVehicles !== oldData.showVehicles) {
+      this.toggleVehicles(data.showVehicles);
+    }
+
+    if (data.showStriping !== oldData.showStriping) {
+      this.toggleStriping(data.showStriping);
+    }
+
+    // do not call the update function when the data.synchronize is set to false
+    if (!data.synchronize) {
+      return;
+    }
 
     if (data.JSON.length === 0) {
       if (oldData.JSON !== undefined && oldData.JSON.length === 0) {
@@ -86,6 +120,8 @@ AFRAME.registerComponent('street', {
       );
       this.el.append(buildingsEl);
     }
+    // the scene has been loaded, set the synchronize flag
+    this.el.setAttribute('street', 'synchronize', false);
   }
 });
 
@@ -95,14 +131,18 @@ AFRAME.registerComponent('streetmix-loader', {
     streetmixStreetURL: { type: 'string' },
     streetmixAPIURL: { type: 'string' },
     showBuildings: { default: true },
-    name: { default: '' }
+    name: { default: '' },
+    synchronize: { default: true }
   },
   update: function (oldData) {
     // fired at start and at each subsequent change of any schema value
     // This method may fire a few times when viewing a streetmix street in 3dstreet:
     // First to find the proper path, once to actually load the street, and then subsequent updates such as street name
-    var data = this.data;
-    var el = this.el;
+    const data = this.data;
+    const el = this.el;
+
+    // do not call the update function when the data.synchronize is set to false
+    if (!data.synchronize) return;
 
     // if the loader has run once already, and upon update neither URL has changed, do not take action
     if (
@@ -134,7 +174,7 @@ AFRAME.registerComponent('streetmix-loader', {
       return;
     }
 
-    var request = new XMLHttpRequest();
+    const request = new XMLHttpRequest();
     console.log('[streetmix-loader]', 'GET ' + data.streetmixAPIURL);
 
     request.open('GET', data.streetmixAPIURL, true);
@@ -185,6 +225,8 @@ AFRAME.registerComponent('streetmix-loader', {
           JSON.stringify({ streetmixSegmentsMetric: streetmixSegments })
         );
         el.emit('streetmix-loader-street-loaded');
+        // the streetmix data has been loaded, set the synchronize flag to false
+        el.setAttribute('streetmix-loader', 'synchronize', false);
       } else {
         // We reached our target server, but it returned an error
         console.log(

src/json-utils_1.1.js

@@ -183,11 +183,7 @@ const removeProps = {
   street: { JSON: '*' }
 };
 // a list of component_name:new_component_name pairs to rename in JSON string
-const renameProps = {
-  'streetmix-loader': 'not-streetmix-loader',
-  street: 'not-street',
-  intersection: 'not-intersection'
-};
+const renameProps = {};
 
 function filterJSONstreet(streetJSON) {
   function removeValueCheck(removeVal, value) {

src/street-utils.js

@@ -81,3 +81,24 @@ function newScene(
 }
 
 STREET.utils.newScene = newScene;
+
+function getVehicleEntities() {
+	return getEntitiesByCategories(['vehicles', 'vehicles-rigged', 'vehicles-transit', 'cyclists']);
+}
+
+module.exports.getVehicleEntities = getVehicleEntities;
+
+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.map(categoryName => `a-mixin[category="${categoryName}"]`).join(',');
+	const allCategoriesMixins = document.querySelectorAll(queryForCategoriesMixins);
+	const categoriesMixinIds = Array.from(allCategoriesMixins).map(el => el.id);
+	const queryForAllElements = categoriesMixinIds.map(mixinId => `a-entity[mixin~="${mixinId}"]`).join(',');
+	return document.querySelectorAll(queryForAllElements);
+}