diff --git a/.eslintignore b/.eslintignore
index 66b573540..ffcc03ad1 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,5 @@
src/editor/lib/TransformControls.js
src/lib/
+public
+dist
+.storybook/
diff --git a/src/assets.js b/src/assets.js
index 467bf0f3d..ffdc50c84 100644
--- a/src/assets.js
+++ b/src/assets.js
@@ -239,14 +239,16 @@ function buildAssetHTML(assetUrl, categories) {
`,
- 'loud-bicycle': `
-
+ cyclists: `
+ `,
+ 'loud-bicycle': `
+
diff --git a/src/components/streetplan-loader.js b/src/components/streetplan-loader.js
index 05a45e9db..275e2ce12 100644
--- a/src/components/streetplan-loader.js
+++ b/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(
diff --git a/src/index.js b/src/index.js
index 02e83ddb5..afdd3d581 100644
--- a/src/index.js
+++ b/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(
diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js
index 2ff0b5d79..398162171 100644
--- a/src/json-utils_1.1.js
+++ b/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) {
diff --git a/src/street-utils.js b/src/street-utils.js
index d9c8a5d4b..1fe3c26b8 100644
--- a/src/street-utils.js
+++ b/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);
+}