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

@@ -78,6 +78,8 @@ AFRAME.registerComponent('streetplan-loader', {
       return;
     }
 
+    STREET.sourceType = 'streetplanURL'; // it also could be jsonFile/streetmixURL
+
     var request = new XMLHttpRequest();
     console.log('[streetplan-loader]', 'GET ' + data.streetplanAPIURL);
 

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');
@@ -34,9 +34,50 @@ AFRAME.registerComponent('street', {
     globalAnimated: { default: false },
     length: { default: 60 } // new default of 60 from 0.4.4
   },
+  init: function () {
+    // flag to determine init component load
+    this._initLoad = 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;
+    // do not call the update function when the component is initially loaded and sourceType is jsonFile
+    if (STREET.sourceType === 'jsonFile' && this._initLoad) {
+      this._initLoad = false;
+      return;
+    }
+
+    const data = this.data;
+
+    if (data.showGround !== oldData.showGround) {
+      this.toggleGround(data.showGround);
+      return;
+    }
+
+    if (data.showVehicles !== oldData.showVehicles) {
+      this.toggleVehicles(data.showVehicles);
+      return;
+    }
+
+    if (data.showStriping !== oldData.showStriping) {
+      this.toggleStriping(data.showStriping);
+      return;
+    }
 
     if (data.JSON.length === 0) {
       if (oldData.JSON !== undefined && oldData.JSON.length === 0) {
@@ -101,8 +142,11 @@ AFRAME.registerComponent('streetmix-loader', {
     // 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 update function while loading scene from JSON file
+    if (STREET.sourceType === 'jsonFile') return;
 
     // if the loader has run once already, and upon update neither URL has changed, do not take action
     if (
@@ -134,7 +178,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);
@@ -171,7 +215,7 @@ AFRAME.registerComponent('streetmix-loader', {
           );
         }
 
-        el.setAttribute('data-layer-name', 'Streetmix • ' + streetmixName);
+        el.setAttribute('data-layer-name', 'Streetmix ? ' + streetmixName);
 
         if (data.showBuildings) {
           el.setAttribute('street', 'right', streetData.rightBuildingVariant);
@@ -220,6 +264,9 @@ AFRAME.registerComponent('intersection', {
     var data = this.data;
     var el = this.el;
 
+    // do not call init method while loading scene from JSON file
+    if (STREET.sourceType === 'jsonFile') return;
+
     // remove all child nodes if exists
     while (el.firstChild) {
       el.removeChild(el.lastChild);

src/json-utils_1.1.js

@@ -184,9 +184,6 @@ 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',
-  intersection: 'not-intersection'
 };
 
 function filterJSONstreet(streetJSON) {
@@ -637,6 +634,8 @@ function inputStreetmix() {
   // clearMetadata = true, clearUrlHash = false
   STREET.utils.newScene(true, false);
 
+  STREET.sourceType = 'streetmixURL'; // it also could be jsonFile/streetplanURL
+
   setTimeout(function () {
     window.location.hash = streetmixURL;
   });
@@ -674,6 +673,8 @@ function createElementsFromJSON(streetJSON) {
   // clearMetadata = true, clearUrlHash = true, addDefaultStreet = false
   STREET.utils.newScene(true, true, false);
 
+  STREET.sourceType = 'jsonFile'; // it also could be streetmix/streetplan
+
   const sceneTitle = streetObject.title;
   if (sceneTitle) {
     console.log('sceneTitle from createElementsFromJSON', sceneTitle);

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);
+}