From 8762bbfa0cb38aaef17f9c954028bac723b85619 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 15 May 2024 15:37:04 -0400 Subject: [PATCH 01/23] add v1 street-geo component --- src/components/street-geo.js | 63 ++++++++++++++++++++++++++++++++++++ src/index.js | 1 + 2 files changed, 64 insertions(+) create mode 100644 src/components/street-geo.js diff --git a/src/components/street-geo.js b/src/components/street-geo.js new file mode 100644 index 000000000..c1f9d6449 --- /dev/null +++ b/src/components/street-geo.js @@ -0,0 +1,63 @@ +/* global AFRAME, THREE */ +const MAPBOX_ACCESS_TOKEN_VALUE = 'pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q'; +const GOOGLE_API_KEY = 'AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ'; + + +AFRAME.registerComponent('street-geo', { + schema: { + longitude: { type: 'number', default: 0 }, + latitude: { type: 'number', default: 0 }, + elevation: { type: 'number', default: 0 }, + maps: { type: 'array', default: [] } + }, + + init: function () { + const data = this.data; + const el = this.el; + + // create Mapbox 2D + if (data.maps.includes('mapbox2d')) { + const centerValue = `${data.longitude}, ${data.latitude}`; + + const mapboxElement = document.createElement('a-entity'); + mapboxElement.setAttribute('data-layer-name', 'Mapbox Satellite Streets'); + mapboxElement.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;'); + mapboxElement.setAttribute('material', 'color: #ffffff; shader: flat; side: both; transparent: true;'); + //mapboxElement.setAttribute('position', '-7 -1 -2'); + mapboxElement.setAttribute('rotation', '-90 -4.25 0'); + mapboxElement.setAttribute('anisotropy', ''); + mapboxElement.setAttribute('mapbox', { + accessToken: MAPBOX_ACCESS_TOKEN_VALUE, + center: centerValue, + zoom: 15, + style: 'mapbox://styles/mapbox/satellite-streets-v11', + pxToWorldRatio: 4 + }); + mapboxElement.classList.add('autocreated'); + el.appendChild(mapboxElement); + } + + // create Google 3D Tiles + if (data.maps.includes('google3d')) { + const tilesElement = document.createElement('a-entity'); + tilesElement.setAttribute('loader-3dtiles', { + url: 'https://tile.googleapis.com/v1/3dtiles/root.json', + long: data.longitude, + lat: data.latitude, + height: -16.5, + googleApiKey: GOOGLE_API_KEY, + geoTransform: 'WGS84Cartesian', + maximumSSE: 48, + maximumMem: 400, + cameraEl: '#camera' + }); + tilesElement.classList.add('autocreated'); + el.appendChild(tilesElement); + } + }, + + remove: function () { + const children = this.el.querySelectorAll('.autocreated'); + children.forEach(child => child.parentNode.removeChild(child)); + } +}); diff --git a/src/index.js b/src/index.js index a0b3fc41a..b5cb240a5 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,7 @@ require('./components/create-from-json'); require('./components/screentock.js'); require('aframe-atlas-uvs-component'); require('./components/streetplan-loader'); +require('./components/street-geo.js'); AFRAME.registerComponent('street', { schema: { From 29b835477fdd255b242f28f1fe68cbc950558d81 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 15 May 2024 15:37:34 -0400 Subject: [PATCH 02/23] change example of google-tiles with new component --- examples/google-tiles/index.html | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/examples/google-tiles/index.html b/examples/google-tiles/index.html index 7510f3af8..8559ba619 100644 --- a/examples/google-tiles/index.html +++ b/examples/google-tiles/index.html @@ -100,21 +100,11 @@ - - - - + From 8620c642b54dad55ca1e89bfa008615d4748acb2 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 15 May 2024 23:19:45 -0400 Subject: [PATCH 03/23] add updating array maps data and lat/long --- src/components/street-geo.js | 87 +++++++++++++++++++++++++----------- 1 file changed, 62 insertions(+), 25 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index c1f9d6449..a480cb09e 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -11,36 +11,60 @@ AFRAME.registerComponent('street-geo', { maps: { type: 'array', default: [] } }, - init: function () { + update: function (oldData) { const data = this.data; const el = this.el; - - // create Mapbox 2D - if (data.maps.includes('mapbox2d')) { - const centerValue = `${data.longitude}, ${data.latitude}`; + const mapTypes = { + // : + 'mapbox2d': this.createMapbox2dElement.bind(this), + 'google3d': this.createGoogle3dElement.bind(this) + }; + const updatedData = AFRAME.utils.diff(data, oldData); - const mapboxElement = document.createElement('a-entity'); - mapboxElement.setAttribute('data-layer-name', 'Mapbox Satellite Streets'); - mapboxElement.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;'); - mapboxElement.setAttribute('material', 'color: #ffffff; shader: flat; side: both; transparent: true;'); - //mapboxElement.setAttribute('position', '-7 -1 -2'); - mapboxElement.setAttribute('rotation', '-90 -4.25 0'); - mapboxElement.setAttribute('anisotropy', ''); - mapboxElement.setAttribute('mapbox', { + for (const mapType in mapTypes) { + const createElementFunction = mapTypes[mapType]; + // create Map element and save a link to it in this[mapType] + if (data.maps.includes(mapType) && !this[mapType]) { + this[mapType] = createElementFunction(); + } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude)) { + // call update map function with name: Update + this[mapType + 'Update'].bind(this)(); + } else if (this[mapType] && !data.maps.includes(mapType)) { + // remove element from DOM and from this object + this.el.removeChild(this[mapType]); + this[mapType] = null; + } + } + }, + createMapbox2dElement: function () { + const data = this.data; + const el = this.el; + + const mapbox2dElement = document.createElement('a-entity'); + mapbox2dElement.setAttribute('data-layer-name', 'Mapbox Satellite Streets'); + mapbox2dElement.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;'); + mapbox2dElement.setAttribute('material', 'color: #ffffff; shader: flat; side: both; transparent: true;'); + //mapbox2dElement.setAttribute('position', '-7 -1 -2'); + mapbox2dElement.setAttribute('rotation', '-90 -4.25 0'); + mapbox2dElement.setAttribute('anisotropy', ''); + mapbox2dElement.setAttribute('mapbox', { accessToken: MAPBOX_ACCESS_TOKEN_VALUE, - center: centerValue, + center: `${data.longitude}, ${data.latitude}`, zoom: 15, style: 'mapbox://styles/mapbox/satellite-streets-v11', pxToWorldRatio: 4 }); - mapboxElement.classList.add('autocreated'); - el.appendChild(mapboxElement); - } + mapbox2dElement.classList.add('autocreated'); + el.appendChild(mapbox2dElement); + return mapbox2dElement; + }, + createGoogle3dElement: function () { + const data = this.data; + const el = this.el; - // create Google 3D Tiles - if (data.maps.includes('google3d')) { - const tilesElement = document.createElement('a-entity'); - tilesElement.setAttribute('loader-3dtiles', { + const google3dElement = document.createElement('a-entity'); + google3dElement.setAttribute('data-layer-name', 'Google 3D Tiles'); + google3dElement.setAttribute('loader-3dtiles', { url: 'https://tile.googleapis.com/v1/3dtiles/root.json', long: data.longitude, lat: data.latitude, @@ -51,12 +75,25 @@ AFRAME.registerComponent('street-geo', { maximumMem: 400, cameraEl: '#camera' }); - tilesElement.classList.add('autocreated'); - el.appendChild(tilesElement); - } + google3dElement.classList.add('autocreated'); + el.appendChild(google3dElement); + return google3dElement; }, + google3dUpdate: function () { + const data = this.data; + this.google3d.setAttribute('loader-3dtiles', { + lat: data.latitude, + long: data.longitude + }); + }, + mapbox2dUpdate: function () { + const data = this.data; + this.mapbox2d.setAttribute('mapbox', { + center: `${data.longitude}, ${data.latitude}` + }); - remove: function () { + }, + removeChildMaps: function () { const children = this.el.querySelectorAll('.autocreated'); children.forEach(child => child.parentNode.removeChild(child)); } From 8599504ab48c361af504702bd84d23e1dc03103d Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Thu, 16 May 2024 12:10:05 -0400 Subject: [PATCH 04/23] rename creating functions, add naming description --- src/components/street-geo.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index a480cb09e..fe8a4a7c4 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -10,19 +10,23 @@ AFRAME.registerComponent('street-geo', { elevation: { type: 'number', default: 0 }, maps: { type: 'array', default: [] } }, - + init: function () { + /* + Function names for the given function types must have the following format: + create function: Create, + update function: Update, + */ + this.mapTypes = ['mapbox2d', 'google3d']; + }, update: function (oldData) { const data = this.data; const el = this.el; - const mapTypes = { - // : - 'mapbox2d': this.createMapbox2dElement.bind(this), - 'google3d': this.createGoogle3dElement.bind(this) - }; + const updatedData = AFRAME.utils.diff(data, oldData); - for (const mapType in mapTypes) { - const createElementFunction = mapTypes[mapType]; + for (const mapType of this.mapTypes) { + // create map function with name: Create + const createElementFunction = this[mapType + 'Create'].bind(this); // create Map element and save a link to it in this[mapType] if (data.maps.includes(mapType) && !this[mapType]) { this[mapType] = createElementFunction(); @@ -36,7 +40,7 @@ AFRAME.registerComponent('street-geo', { } } }, - createMapbox2dElement: function () { + mapbox2dCreate: function () { const data = this.data; const el = this.el; @@ -58,7 +62,7 @@ AFRAME.registerComponent('street-geo', { el.appendChild(mapbox2dElement); return mapbox2dElement; }, - createGoogle3dElement: function () { + google3dCreate: function () { const data = this.data; const el = this.el; From 967edc1765b4077990d40df3372412448fb3d4dc Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Thu, 16 May 2024 21:00:55 -0400 Subject: [PATCH 05/23] add elevation attribute calculate elevation with constant height value for now --- src/components/street-geo.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index fe8a4a7c4..dd53684c7 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -16,13 +16,14 @@ AFRAME.registerComponent('street-geo', { create function: Create, update function: Update, */ - this.mapTypes = ['mapbox2d', 'google3d']; + this.mapTypes = ['mapbox2d', 'google3d']; + this.elevationHeightConstant = 32.49158; }, update: function (oldData) { const data = this.data; const el = this.el; - const updatedData = AFRAME.utils.diff(data, oldData); + const updatedData = AFRAME.utils.diff(oldData, data); for (const mapType of this.mapTypes) { // create map function with name: Create @@ -30,7 +31,7 @@ AFRAME.registerComponent('street-geo', { // create Map element and save a link to it in this[mapType] if (data.maps.includes(mapType) && !this[mapType]) { this[mapType] = createElementFunction(); - } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude)) { + } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude || updatedData.elevation)) { // call update map function with name: Update this[mapType + 'Update'].bind(this)(); } else if (this[mapType] && !data.maps.includes(mapType)) { @@ -72,7 +73,7 @@ AFRAME.registerComponent('street-geo', { url: 'https://tile.googleapis.com/v1/3dtiles/root.json', long: data.longitude, lat: data.latitude, - height: -16.5, + height: data.elevation - this.elevationHeightConstant ?? -26, googleApiKey: GOOGLE_API_KEY, geoTransform: 'WGS84Cartesian', maximumSSE: 48, @@ -87,7 +88,8 @@ AFRAME.registerComponent('street-geo', { const data = this.data; this.google3d.setAttribute('loader-3dtiles', { lat: data.latitude, - long: data.longitude + long: data.longitude, + height: data.elevation - this.elevationHeightConstant ?? -26, }); }, mapbox2dUpdate: function () { From ce6656216d7604f2917d9b33bd3caeec795d10db Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Thu, 16 May 2024 21:03:38 -0400 Subject: [PATCH 06/23] remove testing height value --- src/components/street-geo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index dd53684c7..97654802b 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -73,7 +73,7 @@ AFRAME.registerComponent('street-geo', { url: 'https://tile.googleapis.com/v1/3dtiles/root.json', long: data.longitude, lat: data.latitude, - height: data.elevation - this.elevationHeightConstant ?? -26, + height: data.elevation - this.elevationHeightConstant, googleApiKey: GOOGLE_API_KEY, geoTransform: 'WGS84Cartesian', maximumSSE: 48, @@ -89,7 +89,7 @@ AFRAME.registerComponent('street-geo', { this.google3d.setAttribute('loader-3dtiles', { lat: data.latitude, long: data.longitude, - height: data.elevation - this.elevationHeightConstant ?? -26, + height: data.elevation - this.elevationHeightConstant, }); }, mapbox2dUpdate: function () { From 3ae843a6321999551a9d7cdadc313456bf311c9f Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Thu, 16 May 2024 21:04:04 -0400 Subject: [PATCH 07/23] change elevation in example --- examples/google-tiles/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/google-tiles/index.html b/examples/google-tiles/index.html index 8559ba619..a3ca2d26d 100644 --- a/examples/google-tiles/index.html +++ b/examples/google-tiles/index.html @@ -103,6 +103,7 @@ From f289691c882f0ef5079917a766c1de63a390c2c6 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 17:39:44 -0400 Subject: [PATCH 08/23] convert indentation to spaces --- src/components/street-geo.js | 124 +++++++++++++++++------------------ 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index 97654802b..4447411f2 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -11,13 +11,13 @@ AFRAME.registerComponent('street-geo', { maps: { type: 'array', default: [] } }, init: function () { - /* - Function names for the given function types must have the following format: - create function: Create, - update function: Update, - */ + /* + Function names for the given function types must have the following format: + create function: Create, + update function: Update, + */ this.mapTypes = ['mapbox2d', 'google3d']; - this.elevationHeightConstant = 32.49158; + this.elevationHeightConstant = 32.49158; }, update: function (oldData) { const data = this.data; @@ -26,77 +26,77 @@ AFRAME.registerComponent('street-geo', { const updatedData = AFRAME.utils.diff(oldData, data); for (const mapType of this.mapTypes) { - // create map function with name: Create - const createElementFunction = this[mapType + 'Create'].bind(this); - // create Map element and save a link to it in this[mapType] - if (data.maps.includes(mapType) && !this[mapType]) { - this[mapType] = createElementFunction(); - } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude || updatedData.elevation)) { - // call update map function with name: Update - this[mapType + 'Update'].bind(this)(); - } else if (this[mapType] && !data.maps.includes(mapType)) { - // remove element from DOM and from this object - this.el.removeChild(this[mapType]); - this[mapType] = null; - } + // create map function with name: Create + const createElementFunction = this[mapType + 'Create'].bind(this); + // create Map element and save a link to it in this[mapType] + if (data.maps.includes(mapType) && !this[mapType]) { + this[mapType] = createElementFunction(); + } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude || updatedData.elevation)) { + // call update map function with name: Update + this[mapType + 'Update'].bind(this)(); + } else if (this[mapType] && !data.maps.includes(mapType)) { + // remove element from DOM and from this object + this.el.removeChild(this[mapType]); + this[mapType] = null; + } } }, mapbox2dCreate: function () { const data = this.data; const el = this.el; - const mapbox2dElement = document.createElement('a-entity'); - mapbox2dElement.setAttribute('data-layer-name', 'Mapbox Satellite Streets'); - mapbox2dElement.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;'); - mapbox2dElement.setAttribute('material', 'color: #ffffff; shader: flat; side: both; transparent: true;'); - //mapbox2dElement.setAttribute('position', '-7 -1 -2'); - mapbox2dElement.setAttribute('rotation', '-90 -4.25 0'); - mapbox2dElement.setAttribute('anisotropy', ''); - mapbox2dElement.setAttribute('mapbox', { - accessToken: MAPBOX_ACCESS_TOKEN_VALUE, - center: `${data.longitude}, ${data.latitude}`, - zoom: 15, - style: 'mapbox://styles/mapbox/satellite-streets-v11', - pxToWorldRatio: 4 - }); - mapbox2dElement.classList.add('autocreated'); - el.appendChild(mapbox2dElement); - return mapbox2dElement; + const mapbox2dElement = document.createElement('a-entity'); + mapbox2dElement.setAttribute('data-layer-name', 'Mapbox Satellite Streets'); + mapbox2dElement.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;'); + mapbox2dElement.setAttribute('material', 'color: #ffffff; shader: flat; side: both; transparent: true;'); + //mapbox2dElement.setAttribute('position', '-7 -1 -2'); + mapbox2dElement.setAttribute('rotation', '-90 -4.25 0'); + mapbox2dElement.setAttribute('anisotropy', ''); + mapbox2dElement.setAttribute('mapbox', { + accessToken: MAPBOX_ACCESS_TOKEN_VALUE, + center: `${data.longitude}, ${data.latitude}`, + zoom: 15, + style: 'mapbox://styles/mapbox/satellite-streets-v11', + pxToWorldRatio: 4 + }); + mapbox2dElement.classList.add('autocreated'); + el.appendChild(mapbox2dElement); + return mapbox2dElement; }, google3dCreate: function () { const data = this.data; const el = this.el; - const google3dElement = document.createElement('a-entity'); - google3dElement.setAttribute('data-layer-name', 'Google 3D Tiles'); - google3dElement.setAttribute('loader-3dtiles', { - url: 'https://tile.googleapis.com/v1/3dtiles/root.json', - long: data.longitude, - lat: data.latitude, - height: data.elevation - this.elevationHeightConstant, - googleApiKey: GOOGLE_API_KEY, - geoTransform: 'WGS84Cartesian', - maximumSSE: 48, - maximumMem: 400, - cameraEl: '#camera' - }); - google3dElement.classList.add('autocreated'); - el.appendChild(google3dElement); - return google3dElement; + const google3dElement = document.createElement('a-entity'); + google3dElement.setAttribute('data-layer-name', 'Google 3D Tiles'); + google3dElement.setAttribute('loader-3dtiles', { + url: 'https://tile.googleapis.com/v1/3dtiles/root.json', + long: data.longitude, + lat: data.latitude, + height: data.elevation - this.elevationHeightConstant, + googleApiKey: GOOGLE_API_KEY, + geoTransform: 'WGS84Cartesian', + maximumSSE: 48, + maximumMem: 400, + cameraEl: '#camera' + }); + google3dElement.classList.add('autocreated'); + el.appendChild(google3dElement); + return google3dElement; }, google3dUpdate: function () { - const data = this.data; - this.google3d.setAttribute('loader-3dtiles', { - lat: data.latitude, - long: data.longitude, - height: data.elevation - this.elevationHeightConstant, - }); + const data = this.data; + this.google3d.setAttribute('loader-3dtiles', { + lat: data.latitude, + long: data.longitude, + height: data.elevation - this.elevationHeightConstant, + }); }, mapbox2dUpdate: function () { - const data = this.data; - this.mapbox2d.setAttribute('mapbox', { - center: `${data.longitude}, ${data.latitude}` - }); + const data = this.data; + this.mapbox2d.setAttribute('mapbox', { + center: `${data.longitude}, ${data.latitude}` + }); }, removeChildMaps: function () { From f19b4c710dd610edc3934c6ec3e009ce87912cba Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 17:40:18 -0400 Subject: [PATCH 09/23] remove unused function --- src/components/street-geo.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index 4447411f2..286c4ccfa 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -98,9 +98,5 @@ AFRAME.registerComponent('street-geo', { center: `${data.longitude}, ${data.latitude}` }); - }, - removeChildMaps: function () { - const children = this.el.querySelectorAll('.autocreated'); - children.forEach(child => child.parentNode.removeChild(child)); } }); From 6fa70dbad1510d8dd10804757ef380b37d35cb57 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 18:58:00 -0400 Subject: [PATCH 10/23] add documentation --- src/components/street-geo.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index 286c4ccfa..ab5b38c5d 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -2,7 +2,21 @@ const MAPBOX_ACCESS_TOKEN_VALUE = 'pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q'; const GOOGLE_API_KEY = 'AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ'; - +/* + * Street-geo component + * + * the component accept longitude, latitude, elevation and an array of map types to indicate + * which child maps to spawn. Possible values for maps array: 'mapbox2d', 'google3d'. + * The component assigns the class 'autocreated' to its child elements. + * All attribute values can be changed at runtime and the component will update + * the child elements (map entities) and their corresponding parameters. + * The 'elevation' attribute is only used for the 'google3d' tiles element for now. + * + * to add support for a new map type, you need to take the following steps: + * - add map name to this.mapTypes variable + * - add creating function with name: Create + * - add update function with name: Update + */ AFRAME.registerComponent('street-geo', { schema: { longitude: { type: 'number', default: 0 }, @@ -28,8 +42,8 @@ AFRAME.registerComponent('street-geo', { for (const mapType of this.mapTypes) { // create map function with name: Create const createElementFunction = this[mapType + 'Create'].bind(this); - // create Map element and save a link to it in this[mapType] if (data.maps.includes(mapType) && !this[mapType]) { + // create Map element and save a link to it in this[mapType] this[mapType] = createElementFunction(); } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude || updatedData.elevation)) { // call update map function with name: Update From f54207ce200c160157600ccf97e89f12d06e1e4f Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 18:58:26 -0400 Subject: [PATCH 11/23] change variable name --- src/components/street-geo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index ab5b38c5d..1fba8e240 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -41,10 +41,10 @@ AFRAME.registerComponent('street-geo', { for (const mapType of this.mapTypes) { // create map function with name: Create - const createElementFunction = this[mapType + 'Create'].bind(this); + const createMapFunction = this[mapType + 'Create'].bind(this); if (data.maps.includes(mapType) && !this[mapType]) { // create Map element and save a link to it in this[mapType] - this[mapType] = createElementFunction(); + this[mapType] = createMapFunction(); } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude || updatedData.elevation)) { // call update map function with name: Update this[mapType + 'Update'].bind(this)(); From 22f426eebe8d3d3d70d58513fb53d821899183e4 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 21:26:14 -0400 Subject: [PATCH 12/23] add note about map libs --- src/components/street-geo.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/street-geo.js b/src/components/street-geo.js index 1fba8e240..6673e13ae 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -16,6 +16,8 @@ const GOOGLE_API_KEY = 'AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ'; * - add map name to this.mapTypes variable * - add creating function with name: Create * - add update function with name: Update + * + * It is assumed that the appropriate libraries for all map types are loaded in advance. */ AFRAME.registerComponent('street-geo', { schema: { From 2f1bbe79201dcd0b73a239fe835bde36e217c01d Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 22:20:00 -0400 Subject: [PATCH 13/23] add browser chai test for street-geo component --- test/street-geo-test-bdd.mjs | 98 ++++++++++++++++++++++++++++++++++++ test/street-geo-test.html | 25 +++++++++ 2 files changed, 123 insertions(+) create mode 100644 test/street-geo-test-bdd.mjs create mode 100644 test/street-geo-test.html diff --git a/test/street-geo-test-bdd.mjs b/test/street-geo-test-bdd.mjs new file mode 100644 index 000000000..ff6b92655 --- /dev/null +++ b/test/street-geo-test-bdd.mjs @@ -0,0 +1,98 @@ +let expect = chai.expect; + +describe('street-geo component', function() { + let el; + + before((done) => { + const scene = document.createElement('a-scene'); + document.body.appendChild(scene); + el = document.createElement('a-entity'); + el.setAttribute('id', 'street-geo-test'); + el.setAttribute('street-geo', { + longitude: 10, + latitude: 20, + elevation: 30, + maps: 'mapbox2d' + }); + scene.appendChild(el); + + setTimeout(() => { + done(); + }, 500); + }); + + it('should create a mapbox2d element', () => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + expect(mapbox2dElement).to.exist; + }); + + it('should create a google3d element and delete mapbox2d element', (done) => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + expect(mapbox2dElement).to.exist; + + el.setAttribute('street-geo', 'maps', 'google3d'); + + setTimeout(() => { + const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + expect(updatedMapbox2dElement).to.not.exist; + expect(updatedGoogle3dElement).to.exist; + + done(); + }, 1000); + }); + + it('should create both mapbox2d and google3d elements', (done) => { + el.setAttribute('street-geo', 'maps', 'mapbox2d, google3d'); + + setTimeout(() => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + expect(mapbox2dElement).to.exist; + expect(google3dElement).to.exist; + done(); + }, 1000); + }); + + it('should delete mapbox2d and google3d elements after setting maps attribute to empty', (done) => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + expect(mapbox2dElement).to.exist; + expect(google3dElement).to.exist; + + el.setAttribute('street-geo', 'maps', ''); + + setTimeout(() => { + const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + expect(updatedMapbox2dElement).to.not.exist; + expect(updatedGoogle3dElement).to.not.exist; + + done(); + }, 1000); + }); + + it('should update latitude, longitude, and elevation for google3d', (done) => { + el.setAttribute('street-geo', 'maps', 'google3d'); + el.setAttribute('street-geo', 'longitude', 40); + el.setAttribute('street-geo', 'latitude', 50); + el.setAttribute('street-geo', 'elevation', 100); + + setTimeout(() => { + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + expect(google3dElement).to.exist; + + const loader3dtilesAttr = google3dElement.getAttribute('loader-3dtiles'); + expect(loader3dtilesAttr.long).to.equal(40); + expect(loader3dtilesAttr.lat).to.equal(50); + expect(loader3dtilesAttr.height).to.equal(100 - 32.49158); + + done(); + }, 1000); + }); +}); diff --git a/test/street-geo-test.html b/test/street-geo-test.html new file mode 100644 index 000000000..723c23f29 --- /dev/null +++ b/test/street-geo-test.html @@ -0,0 +1,25 @@ + + + + + Mocha Tests + + + +
+ + + + + + + + + + + + + From 84c2233118e628aace9a886a6e7ec6c0fa3f1fd5 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 22:27:18 -0400 Subject: [PATCH 14/23] pput chai expect function in global window object --- test/street-geo-test-bdd.mjs | 2 -- test/street-geo-test.html | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/test/street-geo-test-bdd.mjs b/test/street-geo-test-bdd.mjs index ff6b92655..0003b3c38 100644 --- a/test/street-geo-test-bdd.mjs +++ b/test/street-geo-test-bdd.mjs @@ -1,5 +1,3 @@ -let expect = chai.expect; - describe('street-geo component', function() { let el; diff --git a/test/street-geo-test.html b/test/street-geo-test.html index 723c23f29..4f7d17b4d 100644 --- a/test/street-geo-test.html +++ b/test/street-geo-test.html @@ -15,6 +15,7 @@ From b9dd06fd2154f47aed390bbc5a5b65ec1a2471f8 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 22:35:39 -0400 Subject: [PATCH 15/23] move street-geo tests in a browserTests folder --- test/{ => browserTests}/street-geo-test-bdd.mjs | 0 test/{ => browserTests}/street-geo-test.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename test/{ => browserTests}/street-geo-test-bdd.mjs (100%) rename test/{ => browserTests}/street-geo-test.html (90%) diff --git a/test/street-geo-test-bdd.mjs b/test/browserTests/street-geo-test-bdd.mjs similarity index 100% rename from test/street-geo-test-bdd.mjs rename to test/browserTests/street-geo-test-bdd.mjs diff --git a/test/street-geo-test.html b/test/browserTests/street-geo-test.html similarity index 90% rename from test/street-geo-test.html rename to test/browserTests/street-geo-test.html index 4f7d17b4d..ec0a7499d 100644 --- a/test/street-geo-test.html +++ b/test/browserTests/street-geo-test.html @@ -20,7 +20,7 @@ mocha.run(); - + From 2999edc85c601d9d707c6e110b690384fe258354 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 22:59:14 -0400 Subject: [PATCH 16/23] rename node test files --- ...tmix-parsers-test.js => aframe-streetmix-parsers-test.node.js} | 0 test/approvalTest/{approval-tests.js => approval-tests.node.js} | 0 ...rom-json-utils-test.js => create-from-json-utils-test.node.js} | 0 test/{streetmix-utils-test.js => streetmix-utils-test.node.js} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename test/{aframe-streetmix-parsers-test.js => aframe-streetmix-parsers-test.node.js} (100%) rename test/approvalTest/{approval-tests.js => approval-tests.node.js} (100%) rename test/{create-from-json-utils-test.js => create-from-json-utils-test.node.js} (100%) rename test/{streetmix-utils-test.js => streetmix-utils-test.node.js} (100%) diff --git a/test/aframe-streetmix-parsers-test.js b/test/aframe-streetmix-parsers-test.node.js similarity index 100% rename from test/aframe-streetmix-parsers-test.js rename to test/aframe-streetmix-parsers-test.node.js diff --git a/test/approvalTest/approval-tests.js b/test/approvalTest/approval-tests.node.js similarity index 100% rename from test/approvalTest/approval-tests.js rename to test/approvalTest/approval-tests.node.js diff --git a/test/create-from-json-utils-test.js b/test/create-from-json-utils-test.node.js similarity index 100% rename from test/create-from-json-utils-test.js rename to test/create-from-json-utils-test.node.js diff --git a/test/streetmix-utils-test.js b/test/streetmix-utils-test.node.js similarity index 100% rename from test/streetmix-utils-test.js rename to test/streetmix-utils-test.node.js From f50c2dfff77284e14dafb5b624b8489e91051307 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 17 May 2024 23:00:00 -0400 Subject: [PATCH 17/23] run only tests with node.js ending --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a126596c9..824796a3d 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "dev": "budo src/index.js:dist/aframe-street-component.js --port 7001 --live", "dist": "webpack", "prepublish": "npm run dist", - "test": "nyc --reporter=lcov --reporter=text mocha --recursive --full-trace", - "test:watch": "mocha --recursive --full-trace --watch", + "test": "nyc --reporter=lcov --reporter=text mocha --recursive --full-trace test/*.node.js", + "test:watch": "mocha --recursive --full-trace --watch test/*.node.js", "lint": "semistandard -v | snazzy", "lint:tested": "semistandard -v 'src/tested/**/*.js' 'test/**/*.js' | snazzy", "lint:fix": "semistandard --fix", From 5f1fbf01f54df678ebdde21d4b98facc0c08c51d Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Mon, 20 May 2024 10:40:16 -0400 Subject: [PATCH 18/23] use .test.js name convention for tests --- package.json | 4 ++-- ...-parsers-test.node.js => aframe-streetmix-parsers.test.js} | 0 .../{approval-tests.node.js => approval-tests.test.js} | 0 ...json-utils-test.node.js => create-from-json-utils.test.js} | 0 .../{streetmix-utils-test.node.js => streetmix-utils.test.js} | 0 5 files changed, 2 insertions(+), 2 deletions(-) rename test/{aframe-streetmix-parsers-test.node.js => aframe-streetmix-parsers.test.js} (100%) rename test/approvalTest/{approval-tests.node.js => approval-tests.test.js} (100%) rename test/{create-from-json-utils-test.node.js => create-from-json-utils.test.js} (100%) rename test/{streetmix-utils-test.node.js => streetmix-utils.test.js} (100%) diff --git a/package.json b/package.json index 824796a3d..2e98cbdb1 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "dev": "budo src/index.js:dist/aframe-street-component.js --port 7001 --live", "dist": "webpack", "prepublish": "npm run dist", - "test": "nyc --reporter=lcov --reporter=text mocha --recursive --full-trace test/*.node.js", - "test:watch": "mocha --recursive --full-trace --watch test/*.node.js", + "test": "nyc --reporter=lcov --reporter=text mocha --recursive --full-trace test/*.test.js", + "test:watch": "mocha --recursive --full-trace --watch test/*.test.js", "lint": "semistandard -v | snazzy", "lint:tested": "semistandard -v 'src/tested/**/*.js' 'test/**/*.js' | snazzy", "lint:fix": "semistandard --fix", diff --git a/test/aframe-streetmix-parsers-test.node.js b/test/aframe-streetmix-parsers.test.js similarity index 100% rename from test/aframe-streetmix-parsers-test.node.js rename to test/aframe-streetmix-parsers.test.js diff --git a/test/approvalTest/approval-tests.node.js b/test/approvalTest/approval-tests.test.js similarity index 100% rename from test/approvalTest/approval-tests.node.js rename to test/approvalTest/approval-tests.test.js diff --git a/test/create-from-json-utils-test.node.js b/test/create-from-json-utils.test.js similarity index 100% rename from test/create-from-json-utils-test.node.js rename to test/create-from-json-utils.test.js diff --git a/test/streetmix-utils-test.node.js b/test/streetmix-utils.test.js similarity index 100% rename from test/streetmix-utils-test.node.js rename to test/streetmix-utils.test.js From 57711f3c9045512120dccf6a688a2a20a138ed9a Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Mon, 20 May 2024 10:44:25 -0400 Subject: [PATCH 19/23] add test for street-geo with mocha and jsdom --- package.json | 1 + test/street-geo.test.js | 108 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 test/street-geo.test.js diff --git a/package.json b/package.json index 2e98cbdb1..19592969e 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "webpack-cli": "^4.7.0" }, "dependencies": { + "aframe": "^1.5.0", "aframe-atlas-uvs-component": "^3.0.0", "babel-polyfill": "^6.26.0", "latest": "^0.2.0" diff --git a/test/street-geo.test.js b/test/street-geo.test.js new file mode 100644 index 000000000..4122024f9 --- /dev/null +++ b/test/street-geo.test.js @@ -0,0 +1,108 @@ +const assert = require('assert'); +require('jsdom-global')(); +const AFRAME = require('aframe/src'); +require('../src/components/street-geo.js'); + +describe('street-geo component', function() { + let el; + + before((done) => { + const scene = document.createElement('a-scene'); + document.body.appendChild(scene); + el = document.createElement('a-entity'); + el.setAttribute('street-geo', { + longitude: 10, + latitude: 20, + elevation: 30, + maps: 'mapbox2d' + }); + scene.appendChild(el); + + setTimeout(() => { + done(); + }, 500); + }); + + it('should create a mapbox2d element', () => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + assert.ok(mapbox2dElement, 'mapbox2d element not created'); + }); + + it('should create a google3d element and delete mapbox2d element', (done) => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + assert.ok(mapbox2dElement, 'mapbox2d element not created'); + + el.setAttribute('street-geo', 'maps', 'google3d'); + + setTimeout(() => { + setTimeout(() => { + const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + assert.ok(!updatedMapbox2dElement, 'mapbox2d element not deleted'); + assert.ok(updatedGoogle3dElement, 'google3d element not created'); + + done(); + }); + }); + }); + + it('should create both mapbox2d and google3d elements', (done) => { + el.setAttribute('street-geo', 'maps', 'mapbox2d, google3d'); + + setTimeout(() => { + setTimeout(() => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + assert.ok(mapbox2dElement, 'mapbox2d element not created'); + assert.ok(google3dElement, 'google3d element not created'); + done(); + }); + }); + }); + + it('should delete mapbox2d and google3d elements after setting maps attribute to empty', (done) => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + assert.ok(mapbox2dElement, 'mapbox2d element not created'); + assert.ok(google3dElement, 'google3d element not created'); + + el.setAttribute('street-geo', 'maps', ''); + + setTimeout(() => { + setTimeout(() => { + const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + assert.ok(!updatedMapbox2dElement, 'mapbox2d element not deleted'); + assert.ok(!updatedGoogle3dElement, 'google3d element not deleted'); + + done(); + }); + }); + }); + + it('should update latitude, longitude, and elevation for google3d', (done) => { + el.setAttribute('street-geo', 'maps', 'google3d'); + el.setAttribute('street-geo', 'longitude', 40); + el.setAttribute('street-geo', 'latitude', 50); + el.setAttribute('street-geo', 'elevation', 100); + + setTimeout(() => { + setTimeout(() => { + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + assert.ok(google3dElement, 'google3d element not created'); + + const loader3dtilesAttr = google3dElement.getAttribute('loader-3dtiles'); + assert.strictEqual(loader3dtilesAttr.long, 40); + assert.strictEqual(loader3dtilesAttr.lat, 50); + assert.strictEqual(loader3dtilesAttr.height, 100 - 32.49158); + + done(); + }); + }); + }); +}); From 14071515b5834253507dbe7bc302b1ddd80500e1 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Mon, 20 May 2024 21:49:33 -0400 Subject: [PATCH 20/23] add 2 setTimeout instead of wait for 1s --- test/browserTests/street-geo-test-bdd.mjs | 72 +++++++++++++---------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/test/browserTests/street-geo-test-bdd.mjs b/test/browserTests/street-geo-test-bdd.mjs index 0003b3c38..2f6b6eff7 100644 --- a/test/browserTests/street-geo-test-bdd.mjs +++ b/test/browserTests/street-geo-test-bdd.mjs @@ -33,26 +33,30 @@ describe('street-geo component', function() { el.setAttribute('street-geo', 'maps', 'google3d'); setTimeout(() => { - const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - - expect(updatedMapbox2dElement).to.not.exist; - expect(updatedGoogle3dElement).to.exist; - - done(); - }, 1000); + setTimeout(() => { + const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + expect(updatedMapbox2dElement).to.not.exist; + expect(updatedGoogle3dElement).to.exist; + + done(); + }); + }); }); it('should create both mapbox2d and google3d elements', (done) => { el.setAttribute('street-geo', 'maps', 'mapbox2d, google3d'); setTimeout(() => { - const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - expect(mapbox2dElement).to.exist; - expect(google3dElement).to.exist; - done(); - }, 1000); + setTimeout(() => { + const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + expect(mapbox2dElement).to.exist; + expect(google3dElement).to.exist; + done(); + }); + }); }); it('should delete mapbox2d and google3d elements after setting maps attribute to empty', (done) => { @@ -65,14 +69,16 @@ describe('street-geo component', function() { el.setAttribute('street-geo', 'maps', ''); setTimeout(() => { - const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - - expect(updatedMapbox2dElement).to.not.exist; - expect(updatedGoogle3dElement).to.not.exist; - - done(); - }, 1000); + setTimeout(() => { + const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); + const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + + expect(updatedMapbox2dElement).to.not.exist; + expect(updatedGoogle3dElement).to.not.exist; + + done(); + }); + }); }); it('should update latitude, longitude, and elevation for google3d', (done) => { @@ -82,15 +88,17 @@ describe('street-geo component', function() { el.setAttribute('street-geo', 'elevation', 100); setTimeout(() => { - const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - expect(google3dElement).to.exist; - - const loader3dtilesAttr = google3dElement.getAttribute('loader-3dtiles'); - expect(loader3dtilesAttr.long).to.equal(40); - expect(loader3dtilesAttr.lat).to.equal(50); - expect(loader3dtilesAttr.height).to.equal(100 - 32.49158); - - done(); - }, 1000); + setTimeout(() => { + const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); + expect(google3dElement).to.exist; + + const loader3dtilesAttr = google3dElement.getAttribute('loader-3dtiles'); + expect(loader3dtilesAttr.long).to.equal(40); + expect(loader3dtilesAttr.lat).to.equal(50); + expect(loader3dtilesAttr.height).to.equal(100 - 32.49158); + + done(); + }); + }); }); }); From f9b4fafece5daff2c190ea828c319b7807938493 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Mon, 20 May 2024 21:50:27 -0400 Subject: [PATCH 21/23] remove aframe from package.json dependencies --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 19592969e..2e98cbdb1 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,6 @@ "webpack-cli": "^4.7.0" }, "dependencies": { - "aframe": "^1.5.0", "aframe-atlas-uvs-component": "^3.0.0", "babel-polyfill": "^6.26.0", "latest": "^0.2.0" From 638df85806c25152562776d515e5cd3380c0bf35 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Mon, 20 May 2024 21:51:23 -0400 Subject: [PATCH 22/23] remove street-geo.test.js --- test/street-geo.test.js | 108 ---------------------------------------- 1 file changed, 108 deletions(-) delete mode 100644 test/street-geo.test.js diff --git a/test/street-geo.test.js b/test/street-geo.test.js deleted file mode 100644 index 4122024f9..000000000 --- a/test/street-geo.test.js +++ /dev/null @@ -1,108 +0,0 @@ -const assert = require('assert'); -require('jsdom-global')(); -const AFRAME = require('aframe/src'); -require('../src/components/street-geo.js'); - -describe('street-geo component', function() { - let el; - - before((done) => { - const scene = document.createElement('a-scene'); - document.body.appendChild(scene); - el = document.createElement('a-entity'); - el.setAttribute('street-geo', { - longitude: 10, - latitude: 20, - elevation: 30, - maps: 'mapbox2d' - }); - scene.appendChild(el); - - setTimeout(() => { - done(); - }, 500); - }); - - it('should create a mapbox2d element', () => { - const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - assert.ok(mapbox2dElement, 'mapbox2d element not created'); - }); - - it('should create a google3d element and delete mapbox2d element', (done) => { - const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - - assert.ok(mapbox2dElement, 'mapbox2d element not created'); - - el.setAttribute('street-geo', 'maps', 'google3d'); - - setTimeout(() => { - setTimeout(() => { - const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - - assert.ok(!updatedMapbox2dElement, 'mapbox2d element not deleted'); - assert.ok(updatedGoogle3dElement, 'google3d element not created'); - - done(); - }); - }); - }); - - it('should create both mapbox2d and google3d elements', (done) => { - el.setAttribute('street-geo', 'maps', 'mapbox2d, google3d'); - - setTimeout(() => { - setTimeout(() => { - const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - assert.ok(mapbox2dElement, 'mapbox2d element not created'); - assert.ok(google3dElement, 'google3d element not created'); - done(); - }); - }); - }); - - it('should delete mapbox2d and google3d elements after setting maps attribute to empty', (done) => { - const mapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - - assert.ok(mapbox2dElement, 'mapbox2d element not created'); - assert.ok(google3dElement, 'google3d element not created'); - - el.setAttribute('street-geo', 'maps', ''); - - setTimeout(() => { - setTimeout(() => { - const updatedMapbox2dElement = el.querySelector('[data-layer-name="Mapbox Satellite Streets"]'); - const updatedGoogle3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - - assert.ok(!updatedMapbox2dElement, 'mapbox2d element not deleted'); - assert.ok(!updatedGoogle3dElement, 'google3d element not deleted'); - - done(); - }); - }); - }); - - it('should update latitude, longitude, and elevation for google3d', (done) => { - el.setAttribute('street-geo', 'maps', 'google3d'); - el.setAttribute('street-geo', 'longitude', 40); - el.setAttribute('street-geo', 'latitude', 50); - el.setAttribute('street-geo', 'elevation', 100); - - setTimeout(() => { - setTimeout(() => { - const google3dElement = el.querySelector('[data-layer-name="Google 3D Tiles"]'); - assert.ok(google3dElement, 'google3d element not created'); - - const loader3dtilesAttr = google3dElement.getAttribute('loader-3dtiles'); - assert.strictEqual(loader3dtilesAttr.long, 40); - assert.strictEqual(loader3dtilesAttr.lat, 50); - assert.strictEqual(loader3dtilesAttr.height, 100 - 32.49158); - - done(); - }); - }); - }); -}); From 6501ff395f0bc06d11e6ca04f6b734a23e57a5b0 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Tue, 21 May 2024 09:14:04 -0700 Subject: [PATCH 23/23] add readme to a-frame components dir --- src/components/README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/README.md diff --git a/src/components/README.md b/src/components/README.md new file mode 100644 index 000000000..97a2343be --- /dev/null +++ b/src/components/README.md @@ -0,0 +1,14 @@ +# Docs for custom A-Frame components used with 3DStreet + +## Street-geo component + +The components accept longitude, latitude, elevation and an array of map types to indicate which child maps to spawn. Possible values for maps array: 'mapbox2d', 'google3d'. + + The component assigns the class 'autocreated' to its child elements. All attribute values can be changed at runtime and the component will update the child elements (map entities) and their corresponding parameters. The 'elevation' attribute is only used for the 'google3d' tiles element for now. + +To add support for a new map type, you need to take the following steps: +* add map name to this.mapTypes variable +* add creating function with name: `Create` +* add update function with name: `Update` + +It is assumed that the appropriate libraries for all map types are loaded in advance. \ No newline at end of file