From 2f70a8aac88d817f6fa9ed13585a645694afca94 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 19 Apr 2024 22:02:02 -0400 Subject: [PATCH 01/26] update mapbox html example code --- mapbox.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/mapbox.html b/mapbox.html index ba1621781..814d37b7e 100644 --- a/mapbox.html +++ b/mapbox.html @@ -10,9 +10,6 @@ - - - 3DStreet @@ -126,8 +123,9 @@ From eb08d4f8d88750ad0fc40b421d92bd1ccd9dae8d Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 19 Apr 2024 22:02:28 -0400 Subject: [PATCH 02/26] create newScene function first version --- src/index.js | 1 + src/street-utils.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 src/street-utils.js diff --git a/src/index.js b/src/index.js index a0b3fc41a..52c69bfee 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ if (typeof VERSION !== 'undefined') { console.log(`3DStreet Version: ${VERSION}` var streetmixParsers = require('./aframe-streetmix-parsers'); var streetmixUtils = require('./tested/streetmix-utils'); require('./json-utils_1.1.js'); +require('./street-utils.js'); require('./components/gltf-part'); require('./components/ocean'); require('./components/svg-extruder.js'); diff --git a/src/street-utils.js b/src/street-utils.js new file mode 100644 index 000000000..7a78accce --- /dev/null +++ b/src/street-utils.js @@ -0,0 +1,45 @@ +/* global AFRAME, THREE */ +/* 3DStreet utils functions */ + +/* +clear old scene elements and data. Create blank scene +*/ +function newScene() { + + const streetContainerEl = document.querySelector("#street-container"); + const environmentEl = document.querySelector("#environment"); + const referenceLayersEl = document.querySelector("#reference-layers"); + + // clear street-container element + while (streetContainerEl.firstChild) { + streetContainerEl.removeChild(streetContainerEl.lastChild); + } + // streetContainerEl.innerHTML = ''; + // create default-street element + const defaultStreet = document.createElement("a-entity"); + defaultStreet.id = "default-street"; + streetContainerEl.appendChild(defaultStreet); + + // clear environment element + while (environmentEl.firstChild) { + environmentEl.removeChild(environmentEl.lastChild); + } + // set default preset:day + environmentEl.setAttribute('street-environment', 'preset', 'day'); + + // clear reference layers + while (referenceLayersEl.firstChild) { + referenceLayersEl.removeChild(referenceLayersEl.lastChild); + } + + // clear metadata + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); + + // clear url hash + setTimeout(function () { + window.location.hash = ''; + }); +} + +STREET.utils.newScene = newScene; From 47bf91c7d2e795bc5433f84f5494f850e1e324d3 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Mon, 22 Apr 2024 20:40:37 -0400 Subject: [PATCH 03/26] change logic of creating blank function --- src/street-utils.js | 79 +++++++++++++++++++++++++++++++-------------- 1 file changed, 55 insertions(+), 24 deletions(-) diff --git a/src/street-utils.js b/src/street-utils.js index 7a78accce..09f9abb1d 100644 --- a/src/street-utils.js +++ b/src/street-utils.js @@ -1,45 +1,76 @@ /* global AFRAME, THREE */ /* 3DStreet utils functions */ +function checkOrCreateEntity(elementId, outerHTML) { + // clear old element data and replace with new HTML string + let newElement = document.getElementById(elementId); + if (!newElement) { + newElement = document.createElement('a-entity'); + newElement.id = elementId; + AFRAME.scenes[0].appendChild(newElement); + } + if (outerHTML.length > 0) { + // replace element HTML data + newElement.outerHTML = outerHTML; + } + return newElement; +} + /* clear old scene elements and data. Create blank scene */ -function newScene() { - +function newScene(clearMetaData=true, clearUrlHash=true) { + + const environmentHTML = + ``; + + const referenceLayersHTML = + ``; + const streetContainerEl = document.querySelector("#street-container"); const environmentEl = document.querySelector("#environment"); const referenceLayersEl = document.querySelector("#reference-layers"); // clear street-container element - while (streetContainerEl.firstChild) { - streetContainerEl.removeChild(streetContainerEl.lastChild); + const streetContainerArray = Array.from(streetContainerEl.children); + for (childEl of streetContainerArray) { + if (childEl.id !== 'default-street') { + streetContainerEl.removeChild(childEl); + } else { + // clear default-street element + const defaultStreet = childEl; + const defaultStreetArray = Array.from(defaultStreet.children); + for (defaultStreetChild of defaultStreetArray) { + defaultStreet.removeChild(defaultStreetChild); + } + defaultStreet.removeAttribute('street'); + defaultStreet.removeAttribute('streetmix-loader'); + } } - // streetContainerEl.innerHTML = ''; - // create default-street element - const defaultStreet = document.createElement("a-entity"); - defaultStreet.id = "default-street"; - streetContainerEl.appendChild(defaultStreet); - - // clear environment element - while (environmentEl.firstChild) { - environmentEl.removeChild(environmentEl.lastChild); - } - // set default preset:day - environmentEl.setAttribute('street-environment', 'preset', 'day'); - // clear reference layers - while (referenceLayersEl.firstChild) { - referenceLayersEl.removeChild(referenceLayersEl.lastChild); + if (!streetContainerEl.querySelector("#default-street")) { + // create default-street element + const defaultStreet = document.createElement("a-entity"); + defaultStreet.id = "default-street"; + streetContainerEl.appendChild(defaultStreet); + defaultStreet.setAttribute('set-loader-from-hash'); } + checkOrCreateEntity("environment", environmentHTML); + checkOrCreateEntity("reference-layers", referenceLayersHTML); + // clear metadata - AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); - AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); + if (clearMetaData) { + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); + } // clear url hash - setTimeout(function () { - window.location.hash = ''; - }); + if (clearUrlHash) { + setTimeout(function () { + window.location.hash = ''; + }); + } } STREET.utils.newScene = newScene; From 5197f6ac8be18e766fb0b4f13574d1751fa1e6bf Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 24 Apr 2024 16:32:22 -0400 Subject: [PATCH 04/26] add option to delete default-street element --- src/street-utils.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/street-utils.js b/src/street-utils.js index 09f9abb1d..69f30c1b4 100644 --- a/src/street-utils.js +++ b/src/street-utils.js @@ -19,7 +19,7 @@ function checkOrCreateEntity(elementId, outerHTML) { /* clear old scene elements and data. Create blank scene */ -function newScene(clearMetaData=true, clearUrlHash=true) { +function newScene(clearMetaData=true, clearUrlHash=true, addDefaultStreet=true) { const environmentHTML = ``; @@ -34,7 +34,7 @@ function newScene(clearMetaData=true, clearUrlHash=true) { // clear street-container element const streetContainerArray = Array.from(streetContainerEl.children); for (childEl of streetContainerArray) { - if (childEl.id !== 'default-street') { + if (!addDefaultStreet || childEl.id !== 'default-street') { streetContainerEl.removeChild(childEl); } else { // clear default-street element @@ -48,7 +48,7 @@ function newScene(clearMetaData=true, clearUrlHash=true) { } } - if (!streetContainerEl.querySelector("#default-street")) { + if (!streetContainerEl.querySelector("#default-street") && addDefaultStreet) { // create default-street element const defaultStreet = document.createElement("a-entity"); defaultStreet.id = "default-street"; @@ -59,6 +59,9 @@ function newScene(clearMetaData=true, clearUrlHash=true) { checkOrCreateEntity("environment", environmentHTML); checkOrCreateEntity("reference-layers", referenceLayersHTML); + // update sceneGraph + Events.emit('entitycreated', streetContainerEl.sceneEl); + // clear metadata if (clearMetaData) { AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); From 8fe3b70b22594f4724f8e8cdc53161953b2a7ccd Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 24 Apr 2024 16:34:12 -0400 Subject: [PATCH 05/26] call STREET.utils.newScene before load scene code from different sources --- src/json-utils_1.1.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js index 49970e9cf..87ee1b79a 100644 --- a/src/json-utils_1.1.js +++ b/src/json-utils_1.1.js @@ -517,7 +517,7 @@ AFRAME.registerComponent('set-loader-from-hash', { }, play: function () { // using play instead of init method so scene loads before setting its metadata component - if (!this.runOnce) { + if (!this.runOnce) { this.runOnce = true; // get hash from window const streetURL = window.location.hash.substring(1); @@ -530,6 +530,9 @@ AFRAME.registerComponent('set-loader-from-hash', { 'Set streetmix-loader streetmixStreetURL to', streetURL ); + + STREET.utils.newScene(true, false); + this.el.setAttribute( 'streetmix-loader', 'streetmixStreetURL', @@ -542,6 +545,9 @@ AFRAME.registerComponent('set-loader-from-hash', { 'Set streetplan-loader streetplanAPIURL to', streetURL ); + + STREET.utils.newScene(true, false); + this.el.setAttribute( 'streetplan-loader', 'streetplanAPIURL', @@ -620,19 +626,17 @@ function inputStreetmix () { 'Please enter a Streetmix URL', 'https://streetmix.net/kfarr/3/example-street' ); + // clrear scene data, create new blank scene. + // clearMetadata = true, clearUrlHash = false + STREET.utils.newScene(true, false); + setTimeout(function () { window.location.hash = streetmixURL; }); - streetContainerEl = document.getElementById('street-container'); - while (streetContainerEl.firstChild) { - streetContainerEl.removeChild(streetContainerEl.lastChild); - } - AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); - AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); - streetContainerEl.innerHTML = - ''; + + defaultStreetEl = document.getElementById('default-street'); + defaultStreetEl.setAttribute('streetmix-loader', 'streetmixStreetURL', streetmixURL); + } STREET.utils.inputStreetmix = inputStreetmix; @@ -656,6 +660,10 @@ function createElementsFromJSON (streetJSON) { streetObject = streetJSON; } + // clrear scene data, create new blank scene. + // clearMetadata = true, clearUrlHash = true, addDefaultStreet = false + STREET.utils.newScene(true, false, false); + const sceneTitle = streetObject.title; if (sceneTitle) { console.log('sceneTitle from createElementsFromJSON', sceneTitle); @@ -663,9 +671,6 @@ function createElementsFromJSON (streetJSON) { } streetContainerEl = document.getElementById('street-container'); - while (streetContainerEl.firstChild) { - streetContainerEl.removeChild(streetContainerEl.lastChild); - } createEntities(streetObject.data, streetContainerEl); STREET.notify.successMessage('Scene loaded from JSON'); @@ -685,8 +690,6 @@ function inputJSON () { function fileJSON () { const reader = new FileReader(); reader.onload = function () { - AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); - AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); createElementsFromJSON(reader.result); }; reader.readAsText(this.files[0]); From 14f5b26da5dd7a0cb8cf54303843d6c2d053c882 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 24 Apr 2024 16:37:04 -0400 Subject: [PATCH 06/26] dont need to clean default-street in a street component anymore --- src/index.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 52c69bfee..e4f7bb16f 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,6 @@ if (typeof VERSION !== 'undefined') { console.log(`3DStreet Version: ${VERSION}` var streetmixParsers = require('./aframe-streetmix-parsers'); var streetmixUtils = require('./tested/streetmix-utils'); require('./json-utils_1.1.js'); -require('./street-utils.js'); require('./components/gltf-part'); require('./components/ocean'); require('./components/svg-extruder.js'); @@ -40,17 +39,6 @@ AFRAME.registerComponent('street', { const streetmixSegments = JSON.parse(data.JSON); - // remove .street-parent and .buildings-parent elements, if they exists, with old scene elements. - // Because they will be created next in the processSegments and processBuildings functions - const streetParent = this.el.querySelector('.street-parent'); - if (streetParent) { - streetParent.remove(); - } - const buildingParent = this.el.querySelector('.buildings-parent'); - if (buildingParent) { - buildingParent.remove(); - } - const streetEl = streetmixParsers.processSegments(streetmixSegments.streetmixSegmentsMetric, data.showStriping, data.length, data.globalAnimated, data.showVehicles); this.el.append(streetEl); @@ -109,6 +97,7 @@ AFRAME.registerComponent('streetmix-loader', { const streetmixName = streetmixResponseObject.name; console.log('streetmixName', streetmixName); + el.setAttribute('streetmix-loader', 'name', streetmixName); let currentSceneTitle; From 867ef075a39ed039974f36cf6c319d089a843b4c Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 24 Apr 2024 16:39:50 -0400 Subject: [PATCH 07/26] return require street-utils.js --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index e4f7bb16f..ed2e54dc7 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ if (typeof VERSION !== 'undefined') { console.log(`3DStreet Version: ${VERSION}` var streetmixParsers = require('./aframe-streetmix-parsers'); var streetmixUtils = require('./tested/streetmix-utils'); require('./json-utils_1.1.js'); +require('./street-utils.js'); require('./components/gltf-part'); require('./components/ocean'); require('./components/svg-extruder.js'); From a40d705c6dfb7d4f4919c9a500fc21f51f7e996c Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 24 Apr 2024 16:48:33 -0400 Subject: [PATCH 08/26] emit entitycreated event from streetContainerEl --- src/street-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/street-utils.js b/src/street-utils.js index 69f30c1b4..004749a4e 100644 --- a/src/street-utils.js +++ b/src/street-utils.js @@ -60,7 +60,7 @@ function newScene(clearMetaData=true, clearUrlHash=true, addDefaultStreet=true) checkOrCreateEntity("reference-layers", referenceLayersHTML); // update sceneGraph - Events.emit('entitycreated', streetContainerEl.sceneEl); + streetContainerEl.emit('entitycreated', streetContainerEl.sceneEl); // clear metadata if (clearMetaData) { From 6f78e84a47ef030229fcd25150d0925825687d13 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 24 Apr 2024 21:35:39 -0400 Subject: [PATCH 09/26] remove old data-layer-name in a blank scene --- src/street-utils.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/street-utils.js b/src/street-utils.js index 004749a4e..19603eaf6 100644 --- a/src/street-utils.js +++ b/src/street-utils.js @@ -43,6 +43,8 @@ function newScene(clearMetaData=true, clearUrlHash=true, addDefaultStreet=true) for (defaultStreetChild of defaultStreetArray) { defaultStreet.removeChild(defaultStreetChild); } + // clear data from previous scene + defaultStreet.removeAttribute('data-layer-name'); defaultStreet.removeAttribute('street'); defaultStreet.removeAttribute('streetmix-loader'); } @@ -59,8 +61,10 @@ function newScene(clearMetaData=true, clearUrlHash=true, addDefaultStreet=true) checkOrCreateEntity("environment", environmentHTML); checkOrCreateEntity("reference-layers", referenceLayersHTML); - // update sceneGraph - streetContainerEl.emit('entitycreated', streetContainerEl.sceneEl); + if (AFRAME.INSPECTOR && AFRAME.INSPECTOR.opened) { + // update sceneGraph + + } // clear metadata if (clearMetaData) { From 8da4d8264005dcd6fbb4be89c090cde456fdde4b Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Mon, 29 Apr 2024 15:19:53 -0400 Subject: [PATCH 10/26] return the code needed to change the parameters of the street component --- src/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/index.js b/src/index.js index ed2e54dc7..6c533d2c2 100644 --- a/src/index.js +++ b/src/index.js @@ -38,6 +38,18 @@ AFRAME.registerComponent('street', { return; } + // remove .street-parent and .buildings-parent elements, if they exists, with old scene elements. + // Because they will be created next in the processSegments and processBuildings functions. + // this is also necessary when changing the parameters of the street component to reload the scene const streetParent = this.el.querySelector('.street-parent'); + const streetParent = this.el.querySelector('.street-parent'); + if (streetParent) { + streetParent.remove(); + } + const buildingParent = this.el.querySelector('.buildings-parent'); + if (buildingParent) { + buildingParent.remove(); + } + const streetmixSegments = JSON.parse(data.JSON); const streetEl = streetmixParsers.processSegments(streetmixSegments.streetmixSegmentsMetric, data.showStriping, data.length, data.globalAnimated, data.showVehicles); From 81cd2113c73c36e0b1ddf90fcf3922d5f1c0937f Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Fri, 31 May 2024 19:53:31 -0700 Subject: [PATCH 11/26] lint fixing --- src/index.js | 2 + src/json-utils_1.1.js | 2 +- src/street-utils.js | 130 +++++++++++++++++++++--------------------- 3 files changed, 67 insertions(+), 67 deletions(-) diff --git a/src/index.js b/src/index.js index 0f199e471..403afa841 100644 --- a/src/index.js +++ b/src/index.js @@ -48,6 +48,8 @@ AFRAME.registerComponent('street', { return; } + const streetmixSegments = JSON.parse(data.JSON); + // remove .street-parent and .buildings-parent elements, if they exists, with old scene elements. // Because they will be created next in the processSegments and processBuildings functions. // this is also necessary when changing the parameters of the street component to reload the scene const streetParent = this.el.querySelector('.street-parent'); diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js index db2afd46d..bafd15efc 100644 --- a/src/json-utils_1.1.js +++ b/src/json-utils_1.1.js @@ -524,7 +524,7 @@ AFRAME.registerComponent('set-loader-from-hash', { }, play: function () { // using play instead of init method so scene loads before setting its metadata component - if (!this.runOnce) { + if (!this.runOnce) { this.runOnce = true; // get hash from window const streetURL = window.location.hash.substring(1); diff --git a/src/street-utils.js b/src/street-utils.js index 19603eaf6..0530ad312 100644 --- a/src/street-utils.js +++ b/src/street-utils.js @@ -1,83 +1,81 @@ -/* global AFRAME, THREE */ +/* global AFRAME */ /* 3DStreet utils functions */ function checkOrCreateEntity(elementId, outerHTML) { - // clear old element data and replace with new HTML string - let newElement = document.getElementById(elementId); - if (!newElement) { - newElement = document.createElement('a-entity'); - newElement.id = elementId; - AFRAME.scenes[0].appendChild(newElement); - } - if (outerHTML.length > 0) { - // replace element HTML data - newElement.outerHTML = outerHTML; - } - return newElement; + // clear old element data and replace with new HTML string + let newElement = document.getElementById(elementId); + if (!newElement) { + newElement = document.createElement('a-entity'); + newElement.id = elementId; + AFRAME.scenes[0].appendChild(newElement); + } + if (outerHTML.length > 0) { + // replace element HTML data + newElement.outerHTML = outerHTML; + } + return newElement; } -/* -clear old scene elements and data. Create blank scene +/* +clear old scene elements and data. Create blank scene */ -function newScene(clearMetaData=true, clearUrlHash=true, addDefaultStreet=true) { +function newScene( + clearMetaData = true, + clearUrlHash = true, + addDefaultStreet = true +) { + const environmentHTML = ``; - const environmentHTML = - ``; + const referenceLayersHTML = ``; - const referenceLayersHTML = - ``; + const streetContainerEl = document.querySelector('#street-container'); - const streetContainerEl = document.querySelector("#street-container"); - const environmentEl = document.querySelector("#environment"); - const referenceLayersEl = document.querySelector("#reference-layers"); + // clear street-container element + const streetContainerArray = Array.from(streetContainerEl.children); + for (var childEl of streetContainerArray) { + if (!addDefaultStreet || childEl.id !== 'default-street') { + streetContainerEl.removeChild(childEl); + } else { + // clear default-street element + const defaultStreet = childEl; + const defaultStreetArray = Array.from(defaultStreet.children); + for (var defaultStreetChild of defaultStreetArray) { + defaultStreet.removeChild(defaultStreetChild); + } + // clear data from previous scene + defaultStreet.removeAttribute('data-layer-name'); + defaultStreet.removeAttribute('street'); + defaultStreet.removeAttribute('streetmix-loader'); + } + } - // clear street-container element - const streetContainerArray = Array.from(streetContainerEl.children); - for (childEl of streetContainerArray) { - if (!addDefaultStreet || childEl.id !== 'default-street') { - streetContainerEl.removeChild(childEl); - } else { - // clear default-street element - const defaultStreet = childEl; - const defaultStreetArray = Array.from(defaultStreet.children); - for (defaultStreetChild of defaultStreetArray) { - defaultStreet.removeChild(defaultStreetChild); - } - // clear data from previous scene - defaultStreet.removeAttribute('data-layer-name'); - defaultStreet.removeAttribute('street'); - defaultStreet.removeAttribute('streetmix-loader'); - } - } + if (!streetContainerEl.querySelector('#default-street') && addDefaultStreet) { + // create default-street element + const defaultStreet = document.createElement('a-entity'); + defaultStreet.id = 'default-street'; + streetContainerEl.appendChild(defaultStreet); + defaultStreet.setAttribute('set-loader-from-hash'); + } - if (!streetContainerEl.querySelector("#default-street") && addDefaultStreet) { - // create default-street element - const defaultStreet = document.createElement("a-entity"); - defaultStreet.id = "default-street"; - streetContainerEl.appendChild(defaultStreet); - defaultStreet.setAttribute('set-loader-from-hash'); - } + checkOrCreateEntity('environment', environmentHTML); + checkOrCreateEntity('reference-layers', referenceLayersHTML); - checkOrCreateEntity("environment", environmentHTML); - checkOrCreateEntity("reference-layers", referenceLayersHTML); + if (AFRAME.INSPECTOR && AFRAME.INSPECTOR.opened) { + // update sceneGraph + } - if (AFRAME.INSPECTOR && AFRAME.INSPECTOR.opened) { - // update sceneGraph - - } + // clear metadata + if (clearMetaData) { + AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); + AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); + } - // clear metadata - if (clearMetaData) { - AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); - AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); - } - - // clear url hash - if (clearUrlHash) { - setTimeout(function () { - window.location.hash = ''; - }); - } + // clear url hash + if (clearUrlHash) { + setTimeout(function () { + window.location.hash = ''; + }); + } } STREET.utils.newScene = newScene; From af0e75e3e5725f8b33d41a5c38fe89d56eb50365 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Thu, 13 Jun 2024 22:51:47 -0400 Subject: [PATCH 12/26] refactor code and fix newScene function work --- src/street-utils.js | 86 ++++++++++++++++++++++++--------------------- 1 file changed, 45 insertions(+), 41 deletions(-) diff --git a/src/street-utils.js b/src/street-utils.js index 0530ad312..70dc0d7b6 100644 --- a/src/street-utils.js +++ b/src/street-utils.js @@ -1,65 +1,69 @@ /* global AFRAME */ /* 3DStreet utils functions */ -function checkOrCreateEntity(elementId, outerHTML) { - // clear old element data and replace with new HTML string - let newElement = document.getElementById(elementId); +/* + * create element with provided Id, clear old element data and replace with new HTML string + */ +function checkOrCreateEntity(elementId, parentEl, layerName = null) { + let newElement = parentEl.querySelector(`#${elementId}`); if (!newElement) { + // create element newElement = document.createElement('a-entity'); newElement.id = elementId; - AFRAME.scenes[0].appendChild(newElement); + parentEl.appendChild(newElement); + } else { + // or remove all childs + while (newElement.firstChild) { + newElement.removeChild(newElement.lastChild); + } } - if (outerHTML.length > 0) { - // replace element HTML data - newElement.outerHTML = outerHTML; + if (layerName) { + newElement.setAttribute('data-layer-name', layerName); } return newElement; } /* -clear old scene elements and data. Create blank scene -*/ + * clear old scene elements and data. Create blank scene + */ function newScene( clearMetaData = true, clearUrlHash = true, addDefaultStreet = true ) { - const environmentHTML = ``; - - const referenceLayersHTML = ``; - - const streetContainerEl = document.querySelector('#street-container'); + const environmentEl = checkOrCreateEntity( + 'environment', + AFRAME.scenes[0], + 'Environment' + ); + environmentEl.removeAttribute('street-environment'); + environmentEl.setAttribute('street-environment', 'preset', 'day'); + const geoLayer = checkOrCreateEntity( + 'reference-layers', + AFRAME.scenes[0], + 'Geospatial Layers' + ); + geoLayer.removeAttribute('street-geo'); + const streetContainerEl = checkOrCreateEntity( + 'street-container', + AFRAME.scenes[0], + 'User Layers' + ); - // clear street-container element - const streetContainerArray = Array.from(streetContainerEl.children); - for (var childEl of streetContainerArray) { - if (!addDefaultStreet || childEl.id !== 'default-street') { - streetContainerEl.removeChild(childEl); - } else { - // clear default-street element - const defaultStreet = childEl; - const defaultStreetArray = Array.from(defaultStreet.children); - for (var defaultStreetChild of defaultStreetArray) { - defaultStreet.removeChild(defaultStreetChild); - } - // clear data from previous scene - defaultStreet.removeAttribute('data-layer-name'); - defaultStreet.removeAttribute('street'); - defaultStreet.removeAttribute('streetmix-loader'); - } - } - - if (!streetContainerEl.querySelector('#default-street') && addDefaultStreet) { + if (addDefaultStreet) { // create default-street element - const defaultStreet = document.createElement('a-entity'); - defaultStreet.id = 'default-street'; - streetContainerEl.appendChild(defaultStreet); - defaultStreet.setAttribute('set-loader-from-hash'); + const defaultStreetEl = checkOrCreateEntity( + 'default-street', + streetContainerEl + ); + defaultStreetEl.setAttribute('set-loader-from-hash', ''); + defaultStreetEl.setAttribute('street', ''); + // clear data from previous scene + defaultStreetEl.removeAttribute('data-layer-name'); + defaultStreetEl.removeAttribute('street'); + defaultStreetEl.removeAttribute('streetmix-loader'); } - checkOrCreateEntity('environment', environmentHTML); - checkOrCreateEntity('reference-layers', referenceLayersHTML); - if (AFRAME.INSPECTOR && AFRAME.INSPECTOR.opened) { // update sceneGraph } From 7891965ece734be507363195e5ec886f0da92a70 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Thu, 13 Jun 2024 22:52:50 -0400 Subject: [PATCH 13/26] use newScene function in toolbar and json-utils --- src/editor/lib/toolbar.js | 19 ++++++++++--------- src/json-utils_1.1.js | 23 ++++++----------------- 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/editor/lib/toolbar.js b/src/editor/lib/toolbar.js index c32f8f0a3..a35a6990f 100644 --- a/src/editor/lib/toolbar.js +++ b/src/editor/lib/toolbar.js @@ -6,20 +6,21 @@ export function inputStreetmix() { 'https://streetmix.net/kfarr/3/example-street' ); + // clrear scene data, create new blank scene. + // clearMetadata = true, clearUrlHash = false + STREET.utils.newScene(true, false); + setTimeout(function () { window.location.hash = streetmixURL; }); const streetContainerEl = document.getElementById('street-container'); - - while (streetContainerEl.firstChild) { - streetContainerEl.removeChild(streetContainerEl.lastChild); - } - - streetContainerEl.innerHTML = - ''; + const defaultStreetEl = document.getElementById('default-street'); + defaultStreetEl.setAttribute( + 'streetmix-loader', + 'streetmixStreetURL', + streetmixURL + ); // update sceneGraph Events.emit('entitycreated', streetContainerEl.sceneEl); diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js index b5069c783..8a8ec3e4e 100644 --- a/src/json-utils_1.1.js +++ b/src/json-utils_1.1.js @@ -540,8 +540,6 @@ AFRAME.registerComponent('set-loader-from-hash', { streetURL ); - STREET.utils.newScene(true, false); - this.el.setAttribute( 'streetmix-loader', 'streetmixStreetURL', @@ -555,8 +553,6 @@ AFRAME.registerComponent('set-loader-from-hash', { streetURL ); - STREET.utils.newScene(true, false); - this.el.setAttribute( 'streetplan-loader', 'streetplanAPIURL', @@ -645,16 +641,12 @@ function inputStreetmix() { window.location.hash = streetmixURL; }); - const streetContainerEl = document.getElementById('street-container'); - while (streetContainerEl.firstChild) { - streetContainerEl.removeChild(streetContainerEl.lastChild); - } - AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); - AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', ''); - streetContainerEl.innerHTML = - ''; + const defaultStreetEl = document.getElementById('default-street'); + defaultStreetEl.setAttribute( + 'streetmix-loader', + 'streetmixStreetURL', + streetmixURL + ); } STREET.utils.inputStreetmix = inputStreetmix; @@ -689,9 +681,6 @@ function createElementsFromJSON(streetJSON) { } const streetContainerEl = document.getElementById('street-container'); - while (streetContainerEl.firstChild) { - streetContainerEl.removeChild(streetContainerEl.lastChild); - } createEntities(streetObject.data, streetContainerEl); STREET.notify.successMessage('Scene loaded from JSON'); From 79d1d8b44112b1adaf962a802c33f80a13eddcbb Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 14 Jun 2024 14:19:38 -0400 Subject: [PATCH 14/26] clear url hash when load from JSON --- src/json-utils_1.1.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js index 8a8ec3e4e..b88efd6d0 100644 --- a/src/json-utils_1.1.js +++ b/src/json-utils_1.1.js @@ -672,7 +672,7 @@ function createElementsFromJSON(streetJSON) { // clrear scene data, create new blank scene. // clearMetadata = true, clearUrlHash = true, addDefaultStreet = false - STREET.utils.newScene(true, false, false); + STREET.utils.newScene(true, true, false); const sceneTitle = streetObject.title; if (sceneTitle) { From 4630a9b0259d0c629f123e5c15d97bfe2c8bbb5d Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 14 Jun 2024 14:22:54 -0400 Subject: [PATCH 15/26] remove unnecesarry code --- src/editor/lib/toolbar.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/editor/lib/toolbar.js b/src/editor/lib/toolbar.js index a35a6990f..da19574bf 100644 --- a/src/editor/lib/toolbar.js +++ b/src/editor/lib/toolbar.js @@ -14,7 +14,6 @@ export function inputStreetmix() { window.location.hash = streetmixURL; }); - const streetContainerEl = document.getElementById('street-container'); const defaultStreetEl = document.getElementById('default-street'); defaultStreetEl.setAttribute( 'streetmix-loader', @@ -23,15 +22,15 @@ export function inputStreetmix() { ); // update sceneGraph - Events.emit('entitycreated', streetContainerEl.sceneEl); + Events.emit('entitycreated', defaultStreetEl.sceneEl); } export function createElementsForScenesFromJSON(streetData) { - const streetContainerEl = document.getElementById('street-container'); + // clrear scene data, create new blank scene. + // clearMetadata = true, clearUrlHash = false, addDefaultStreet = false + STREET.utils.newScene(true, true, false); - while (streetContainerEl.firstChild) { - streetContainerEl.removeChild(streetContainerEl.lastChild); - } + const streetContainerEl = document.getElementById('street-container'); if (!Array.isArray(streetData)) { console.error('Invalid data format. Expected an array.'); From 5c3ec4efcc13a16567fd2c17f90c96772f048500 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Tue, 18 Jun 2024 22:14:58 -0700 Subject: [PATCH 16/26] add "New" button --- src/editor/components/scenegraph/Toolbar.js | 20 +++++++++++++++++++- src/editor/icons/icons.jsx | 18 ++++++++++++++++++ src/editor/icons/index.js | 1 + 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js index 28d582b62..01016d530 100644 --- a/src/editor/components/scenegraph/Toolbar.js +++ b/src/editor/components/scenegraph/Toolbar.js @@ -5,7 +5,7 @@ import { isSceneAuthor, checkIfImagePathIsEmpty } from '../../api/scene'; -import { Cloud24Icon, Save24Icon, Upload24Icon } from '../../icons'; +import { Cloud24Icon, Save24Icon, Upload24Icon, Edit24Icon } from '../../icons'; import Events from '../../lib/Events'; import { saveBlob } from '../../lib/utils'; import { Button, ProfileButton, ScreenshotButton } from '../components'; @@ -150,6 +150,10 @@ export default class Toolbar extends Component { this.cloudSaveHandler({ doSaveAs: true }); }; + newHandler = async () => { + STREET.utils.newScene(); + }; + cloudSaveHandler = async ({ doSaveAs = false }) => { try { // if there is no current user, show sign in modal @@ -368,6 +372,20 @@ export default class Toolbar extends Component { return (
+
+ +
{this.state.showSaveBtn && this.props.currentUser ? (
-
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/mapbox.html b/mapbox.html deleted file mode 100644 index 814d37b7e..000000000 --- a/mapbox.html +++ /dev/null @@ -1,164 +0,0 @@ - - - - - - - - - - - - - 3DStreet - - - - - - - -
- -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 1823459c6a09b79a0d032aa9b8e2072e6ee8a55f Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Wed, 19 Jun 2024 11:35:55 +0200 Subject: [PATCH 18/26] refactor toolbar buttons jsx and style to use correctly the Button component --- .../components/Button/Button.component.jsx | 20 ++-- .../components/Button/Button.module.scss | 1 + .../ProfileButton/ProfileButton.component.jsx | 6 +- .../ScreenshotButton.component.jsx | 31 ------ .../ScreenshotButton.module.scss | 19 ---- .../components/ScreenshotButton/icons.jsx | 27 ----- .../components/ScreenshotButton/index.js | 1 - src/editor/components/components/index.js | 1 - .../modals/GeoModal/GeoModal.component.jsx | 4 +- .../ScenesModal/ScenesModal.component.jsx | 4 +- src/editor/components/scenegraph/Toolbar.js | 100 +++++------------- src/editor/icons/icons.jsx | 30 +++++- src/editor/icons/index.js | 3 +- src/editor/style/scenegraph.scss | 19 +--- 14 files changed, 78 insertions(+), 188 deletions(-) delete mode 100644 src/editor/components/components/ScreenshotButton/ScreenshotButton.component.jsx delete mode 100644 src/editor/components/components/ScreenshotButton/ScreenshotButton.module.scss delete mode 100644 src/editor/components/components/ScreenshotButton/icons.jsx delete mode 100644 src/editor/components/components/ScreenshotButton/index.js diff --git a/src/editor/components/components/Button/Button.component.jsx b/src/editor/components/components/Button/Button.component.jsx index f15c5a4ff..6eaa0de46 100644 --- a/src/editor/components/components/Button/Button.component.jsx +++ b/src/editor/components/components/Button/Button.component.jsx @@ -1,4 +1,4 @@ -import { bool, func, node, number, string } from 'prop-types'; +import { bool, element, func, node, number, string } from 'prop-types'; import classNames from 'classnames'; import styles from './Button.module.scss'; @@ -21,10 +21,12 @@ const variants = { * className?: string; * onClick?: () => void; * type?: string; - * children?: Element; + * children?: Node; * variant?: string; * disabled?: boolean; * id?: string | number; + * leadingIcon?: Element; + * trailingIcon?: Element; * }} props */ const Button = ({ @@ -35,8 +37,8 @@ const Button = ({ variant = 'filled', disabled, id, - leadingicon, - trailingicon + leadingIcon, + trailingIcon }) => ( ); @@ -61,7 +61,9 @@ Button.propTypes = { children: node, variant: string, disabled: bool, - id: string || number + id: string || number, + leadingIcon: element, + trailingIcon: element }; export { Button }; diff --git a/src/editor/components/components/Button/Button.module.scss b/src/editor/components/components/Button/Button.module.scss index da6a5241c..4c25b68c7 100644 --- a/src/editor/components/components/Button/Button.module.scss +++ b/src/editor/components/components/Button/Button.module.scss @@ -6,6 +6,7 @@ align-items: center; column-gap: 8px; width: fit-content; + height: 43px; padding: 11px 15px !important; border-radius: 18px; border: 1px solid transparent; diff --git a/src/editor/components/components/ProfileButton/ProfileButton.component.jsx b/src/editor/components/components/ProfileButton/ProfileButton.component.jsx index 45dbf5881..5141ca987 100644 --- a/src/editor/components/components/ProfileButton/ProfileButton.component.jsx +++ b/src/editor/components/components/ProfileButton/ProfileButton.component.jsx @@ -14,7 +14,7 @@ import { useAuthContext } from '../../../contexts'; const ProfileButton = () => { const { currentUser } = useAuthContext(); - const onClick = async () => { + const onClick = () => { if (currentUser) { return Events.emit('openprofilemodal'); } @@ -25,10 +25,8 @@ const ProfileButton = () => { return ( - ); - } -} -export { ScreenshotButton }; diff --git a/src/editor/components/components/ScreenshotButton/ScreenshotButton.module.scss b/src/editor/components/components/ScreenshotButton/ScreenshotButton.module.scss deleted file mode 100644 index c69a97271..000000000 --- a/src/editor/components/components/ScreenshotButton/ScreenshotButton.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '../../../style/variables.scss'; - -.screenshotButton { - border: unset; - - background-color: variables.$purple; - &:hover { - background-color: variables.$purple-100; - } - &:active { - background-color: variables.$purple-200; - } -} - -@media screen and (max-width: 1024px) { - .innerText { - display: none !important; - } -} diff --git a/src/editor/components/components/ScreenshotButton/icons.jsx b/src/editor/components/components/ScreenshotButton/icons.jsx deleted file mode 100644 index a00f865c5..000000000 --- a/src/editor/components/components/ScreenshotButton/icons.jsx +++ /dev/null @@ -1,27 +0,0 @@ -const ScreenshotIcon = ( - - - - - -); -export { ScreenshotIcon }; diff --git a/src/editor/components/components/ScreenshotButton/index.js b/src/editor/components/components/ScreenshotButton/index.js deleted file mode 100644 index c70def692..000000000 --- a/src/editor/components/components/ScreenshotButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { ScreenshotButton } from './ScreenshotButton.component.jsx'; diff --git a/src/editor/components/components/index.js b/src/editor/components/components/index.js index 3d488a81f..31d0f68d6 100644 --- a/src/editor/components/components/index.js +++ b/src/editor/components/components/index.js @@ -7,7 +7,6 @@ export { Dropdown } from './Dropdown'; export { Checkbox } from './Checkbox'; export { Toggle } from './Toggle'; export { Logo } from './Logo'; -export { ScreenshotButton } from './ScreenshotButton'; export { ProfileButton } from './ProfileButton'; export { SceneCard } from './SceneCard'; export { SceneEditTitle } from './SceneEditTitle'; diff --git a/src/editor/components/modals/GeoModal/GeoModal.component.jsx b/src/editor/components/modals/GeoModal/GeoModal.component.jsx index 7f6a11cca..0bea38964 100644 --- a/src/editor/components/modals/GeoModal/GeoModal.component.jsx +++ b/src/editor/components/modals/GeoModal/GeoModal.component.jsx @@ -226,7 +226,7 @@ const GeoModal = ({ isOpen, onClose }) => { {!qrCodeUrl && ( )}
{this.state.showSaveBtn && this.props.currentUser ? (
{this.state.isSavingScene && } {this.state.isSaveActionActive && (
)}
) : ( )} {this.state.showLoadBtn && ( )} -
+
+
Share
+
this.setState((prevState) => ({ diff --git a/src/editor/icons/icons.jsx b/src/editor/icons/icons.jsx index 9daa8be50..e94268299 100644 --- a/src/editor/icons/icons.jsx +++ b/src/editor/icons/icons.jsx @@ -519,6 +519,33 @@ const QR32Icon = () => ( ); +const ScreenshotIcon = () => ( + + + + + +); + export { Camera32Icon, Save24Icon, @@ -546,5 +573,6 @@ export { GoogleSignInButtonSVG, Chevron24Down, Plus20Circle, - QR32Icon + QR32Icon, + ScreenshotIcon }; diff --git a/src/editor/icons/index.js b/src/editor/icons/index.js index ed0809b6c..dce91620f 100644 --- a/src/editor/icons/index.js +++ b/src/editor/icons/index.js @@ -25,5 +25,6 @@ export { GoogleSignInButtonSVG, Chevron24Down, Plus20Circle, - QR32Icon + QR32Icon, + ScreenshotIcon } from './icons.jsx'; diff --git a/src/editor/style/scenegraph.scss b/src/editor/style/scenegraph.scss index e195f2a01..f2062c1d3 100644 --- a/src/editor/style/scenegraph.scss +++ b/src/editor/style/scenegraph.scss @@ -6,10 +6,6 @@ height: 43px; width: fit-content; z-index: 10; - .actionBtn { - margin: -2.5px 0px -2.5px -2px; - display: flex; - } .toolbarActions { width: fit-content; height: 43px; @@ -38,7 +34,6 @@ align-items: center; column-gap: 12px; } - .cameraButton, .closeButton { border-radius: 22px; } @@ -394,19 +389,7 @@ @media screen and (max-width: 1024px) { #toolbar { right: 24px; - .actionBtn { - width: 43px; - height: 43px; - border-radius: 22px; - .iconContainter { - margin: 0; - } - svg { - width: 24px !important; - height: 24px !important; - } - } - .innerText { + .hideInLowResolution { display: none !important; } } From 6ebfcc4466c08ee863e145bc8dc3076dae504c21 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Wed, 19 Jun 2024 11:46:24 +0200 Subject: [PATCH 19/26] fix comments --- src/editor/lib/toolbar.js | 4 ++-- src/index.js | 2 +- src/json-utils_1.1.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/editor/lib/toolbar.js b/src/editor/lib/toolbar.js index da19574bf..da5001278 100644 --- a/src/editor/lib/toolbar.js +++ b/src/editor/lib/toolbar.js @@ -6,7 +6,7 @@ export function inputStreetmix() { 'https://streetmix.net/kfarr/3/example-street' ); - // clrear scene data, create new blank scene. + // clear scene data, create new blank scene. // clearMetadata = true, clearUrlHash = false STREET.utils.newScene(true, false); @@ -26,7 +26,7 @@ export function inputStreetmix() { } export function createElementsForScenesFromJSON(streetData) { - // clrear scene data, create new blank scene. + // clear scene data, create new blank scene. // clearMetadata = true, clearUrlHash = false, addDefaultStreet = false STREET.utils.newScene(true, true, false); diff --git a/src/index.js b/src/index.js index bd59b6a48..99c130f81 100644 --- a/src/index.js +++ b/src/index.js @@ -52,7 +52,7 @@ AFRAME.registerComponent('street', { // remove .street-parent and .buildings-parent elements, if they exists, with old scene elements. // Because they will be created next in the processSegments and processBuildings functions. - // this is also necessary when changing the parameters of the street component to reload the scene const streetParent = this.el.querySelector('.street-parent'); + // This is also necessary when changing the parameters of the street component to reload the scene. const streetParent = this.el.querySelector('.street-parent'); if (streetParent) { streetParent.remove(); diff --git a/src/json-utils_1.1.js b/src/json-utils_1.1.js index b88efd6d0..2ff0b5d79 100644 --- a/src/json-utils_1.1.js +++ b/src/json-utils_1.1.js @@ -633,7 +633,7 @@ function inputStreetmix() { 'Please enter a Streetmix URL', 'https://streetmix.net/kfarr/3/example-street' ); - // clrear scene data, create new blank scene. + // clear scene data, create new blank scene. // clearMetadata = true, clearUrlHash = false STREET.utils.newScene(true, false); @@ -670,7 +670,7 @@ function createElementsFromJSON(streetJSON) { streetObject = streetJSON; } - // clrear scene data, create new blank scene. + // clear scene data, create new blank scene. // clearMetadata = true, clearUrlHash = true, addDefaultStreet = false STREET.utils.newScene(true, true, false); From 4192401ac3464f49b460e0ac7b7de661622371d4 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Wed, 19 Jun 2024 11:47:30 +0200 Subject: [PATCH 20/26] newHandler is not async --- src/editor/components/scenegraph/Toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js index 3d94f8196..6e6573eff 100644 --- a/src/editor/components/scenegraph/Toolbar.js +++ b/src/editor/components/scenegraph/Toolbar.js @@ -156,7 +156,7 @@ export default class Toolbar extends Component { this.cloudSaveHandler({ doSaveAs: true }); }; - newHandler = async () => { + newHandler = () => { STREET.utils.newScene(); }; From 08ac641377887e42ddc42bd969ef897f9874c45a Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Wed, 19 Jun 2024 12:49:26 +0200 Subject: [PATCH 21/26] force update scenegraph after clicking on new button --- src/editor/components/scenegraph/SceneGraph.js | 1 + src/editor/components/scenegraph/Toolbar.js | 2 ++ src/street-utils.js | 4 ---- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/editor/components/scenegraph/SceneGraph.js b/src/editor/components/scenegraph/SceneGraph.js index 71cfffbb4..0fba64f58 100644 --- a/src/editor/components/scenegraph/SceneGraph.js +++ b/src/editor/components/scenegraph/SceneGraph.js @@ -49,6 +49,7 @@ export default class SceneGraph extends React.Component { componentDidMount() { this.setFirstLevelEntities(); this.rebuildEntityOptions(); + Events.on('updatescenegraph', this.rebuildEntityOptions); Events.on('entityidchange', this.rebuildEntityOptions); Events.on('entitycreated', this.rebuildEntityOptions); Events.on('entityclone', this.rebuildEntityOptions); diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js index 6e6573eff..535081b53 100644 --- a/src/editor/components/scenegraph/Toolbar.js +++ b/src/editor/components/scenegraph/Toolbar.js @@ -157,7 +157,9 @@ export default class Toolbar extends Component { }; newHandler = () => { + AFRAME.INSPECTOR.selectEntity(null); STREET.utils.newScene(); + Events.emit('updatescenegraph'); }; cloudSaveHandler = async ({ doSaveAs = false }) => { diff --git a/src/street-utils.js b/src/street-utils.js index 70dc0d7b6..39363a38e 100644 --- a/src/street-utils.js +++ b/src/street-utils.js @@ -64,10 +64,6 @@ function newScene( defaultStreetEl.removeAttribute('streetmix-loader'); } - if (AFRAME.INSPECTOR && AFRAME.INSPECTOR.opened) { - // update sceneGraph - } - // clear metadata if (clearMetaData) { AFRAME.scenes[0].setAttribute('metadata', 'sceneId', ''); From cfbbccf01c0ecfc550a62b4d6207c5042d01ff2e Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Wed, 19 Jun 2024 14:13:44 +0200 Subject: [PATCH 22/26] use new updatescenegraph action, not a good idea to use entitycreated with sceneEl here once we will have undo/redo --- src/editor/lib/toolbar.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/editor/lib/toolbar.js b/src/editor/lib/toolbar.js index da5001278..27e20cdf7 100644 --- a/src/editor/lib/toolbar.js +++ b/src/editor/lib/toolbar.js @@ -22,7 +22,7 @@ export function inputStreetmix() { ); // update sceneGraph - Events.emit('entitycreated', defaultStreetEl.sceneEl); + Events.emit('updatescenegraph'); } export function createElementsForScenesFromJSON(streetData) { @@ -45,9 +45,8 @@ export function fileJSON(event) { reader.onload = function () { STREET.utils.createElementsFromJSON(reader.result); - const streetContainerEl = document.getElementById('street-container'); // update sceneGraph - Events.emit('entitycreated', streetContainerEl.sceneEl); + Events.emit('updatescenegraph'); }; reader.readAsText(event.target.files[0]); From 29a0b1ad77dc73b4ba2b5adac584b7cdc5256436 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 19 Jun 2024 14:04:44 -0700 Subject: [PATCH 23/26] wip create geoprovider --- src/components/street-geo.js | 1 + .../GeoPanel/GeoPanel.component.jsx | 18 +++--------- src/editor/contexts/Geo.context.js | 29 +++++++++++++++++++ src/editor/contexts/index.js | 1 + src/editor/index.js | 6 ++-- 5 files changed, 39 insertions(+), 16 deletions(-) create mode 100644 src/editor/contexts/Geo.context.js diff --git a/src/components/street-geo.js b/src/components/street-geo.js index 151343b84..dee85a366 100644 --- a/src/components/street-geo.js +++ b/src/components/street-geo.js @@ -35,6 +35,7 @@ AFRAME.registerComponent('street-geo', { }, update: function (oldData) { const data = this.data; + this.el.sceneEl.emit('newGeo', data); const updatedData = AFRAME.utils.diff(oldData, data); diff --git a/src/editor/components/components/GeoPanel/GeoPanel.component.jsx b/src/editor/components/components/GeoPanel/GeoPanel.component.jsx index ef5ed7fbf..4556323a7 100644 --- a/src/editor/components/components/GeoPanel/GeoPanel.component.jsx +++ b/src/editor/components/components/GeoPanel/GeoPanel.component.jsx @@ -1,7 +1,7 @@ import GeoImg from '../../../../../ui_assets/geo.png'; import styles from './GeoPanel.module.scss'; import Events from '../../../lib/Events'; -import { useAuthContext } from '../../../contexts/index.js'; +import { useAuthContext, useGeoContext } from '../../../contexts/index.js'; /** * GeoPanel component. @@ -12,21 +12,11 @@ import { useAuthContext } from '../../../contexts/index.js'; const GeoPanel = () => { const onClick = () => Events.emit('opengeomodal'); const { currentUser } = useAuthContext(); - - let latitude = 0; - let longitude = 0; - let elevation = 0; + const streetGeo = useGeoContext(); let coordinateInfo = null; - const streetGeo = document - .getElementById('reference-layers') - ?.getAttribute('street-geo'); - - if (streetGeo && streetGeo['latitude'] && streetGeo['longitude']) { - latitude = streetGeo['latitude']; - longitude = streetGeo['longitude']; - elevation = streetGeo['elevation'] || 0; - coordinateInfo = `Latitude: ${latitude}, Longitude: ${longitude}, Elevation: ${elevation}m`; + if (streetGeo) { + coordinateInfo = `Latitude: ${streetGeo.latitude}, Longitude: ${streetGeo.longitude}, Elevation: ${streetGeo.elevation}m`; } return ( diff --git a/src/editor/contexts/Geo.context.js b/src/editor/contexts/Geo.context.js new file mode 100644 index 000000000..f12d39004 --- /dev/null +++ b/src/editor/contexts/Geo.context.js @@ -0,0 +1,29 @@ +import { createContext, useContext, useEffect, useState } from 'react'; + +const GeoContext = createContext(null); + +export const GeoProvider = ({ children }) => { + const [info, setInfo] = useState(null); + + useEffect(() => { + const listener = (event) => { + const streetGeo = event.detail; + if (streetGeo && streetGeo['latitude'] && streetGeo['longitude']) { + setInfo({ + latitude: streetGeo['latitude'], + longitude: streetGeo['longitude'], + elevation: streetGeo['elevation'] || 0 + }); + } else { + setInfo(null); + } + }; + AFRAME.scenes[0].addEventListener('newGeo', listener); + + return () => AFRAME.scenes[0].removeEventListener('newGeo', listener); + }, []); + + return {children}; +}; + +export const useGeoContext = () => useContext(GeoContext); diff --git a/src/editor/contexts/index.js b/src/editor/contexts/index.js index e2a2f1c67..3ccdeed0b 100644 --- a/src/editor/contexts/index.js +++ b/src/editor/contexts/index.js @@ -1 +1,2 @@ export { AuthProvider, useAuthContext } from './Auth.context'; +export { GeoProvider, useGeoContext } from './Geo.context.js'; diff --git a/src/editor/index.js b/src/editor/index.js index 6760fad72..ba0ae7df0 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -1,7 +1,7 @@ import { createRoot } from 'react-dom/client'; import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter'; import MainWrapper from './components/MainWrapper'; -import { AuthProvider } from './contexts'; +import { AuthProvider, GeoProvider } from './contexts'; import Events from './lib/Events'; import { AssetsLoader } from './lib/assetsLoader'; import { initCameras } from './lib/cameras'; @@ -76,7 +76,9 @@ Inspector.prototype = { const root = createRoot(div); root.render( - + + + ); From 128346170b52dcc9ef6bdb63784fb1c2886e51bf Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 19 Jun 2024 14:15:21 -0700 Subject: [PATCH 24/26] new button behind pro gate --- src/editor/components/scenegraph/Toolbar.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js index 535081b53..56617ac17 100644 --- a/src/editor/components/scenegraph/Toolbar.js +++ b/src/editor/components/scenegraph/Toolbar.js @@ -380,11 +380,13 @@ export default class Toolbar extends Component { return (
-
- -
+ {this.props.currentUser?.isPro && ( +
+ +
+ )} {this.state.showSaveBtn && this.props.currentUser ? (