Save load fixing

src/index.js

@@ -368,44 +368,44 @@ AFRAME.registerComponent('street-environment', {
     const sky = this.sky;
     const light1 = this.light1;
     const light2 = this.light2;
-  
+
     if (this.data.preset === 'night') {
-      light1.setAttribute('light', 'intensity', 0.5 );
-      light2.setAttribute('light', 'intensity', 0.15 );
+      light1.setAttribute('light', 'intensity', 0.5);
+      light2.setAttribute('light', 'intensity', 0.15);
       sky.setAttribute('color', '#444');
       sky.setAttribute('src', '#sky-night');
       sky.setAttribute('rotation', '0 0 0');
     } else { // day
       // TODO: create a parent with children
-      light1.setAttribute('light', 'intensity', 2 );
-      light2.setAttribute('light', 'intensity', 0.6 );
+      light1.setAttribute('light', 'intensity', 2);
+      light2.setAttribute('light', 'intensity', 0.6);
       sky.setAttribute('color', '#FFF');
       sky.setAttribute('src', '#sky');
       sky.setAttribute('rotation', '0 255 0');
     }
   },
   init: function () {
     const el = this.el;
-    
+
     this.light1 = document.createElement('a-entity');
     const light1 = this.light1;
     light1.setAttribute('id', 'env-light1');
-    light1.setAttribute('light', { type: 'ambient', color: '#FFF'});
+    light1.setAttribute('light', { type: 'ambient', color: '#FFF' });
     el.appendChild(light1);
 
     this.light2 = document.createElement('a-entity');
     const light2 = this.light2;
     light2.setAttribute('id', 'env-light2');
     light2.setAttribute('position', { x: 0.5, y: 1, z: -1 });
-    light2.setAttribute('light', { type: 'directional', color: '#FFF'});
+    light2.setAttribute('light', { type: 'directional', color: '#FFF' });
     el.appendChild(light2);
 
     this.sky = document.createElement('a-sky');
     const sky = this.sky;
     sky.setAttribute('id', 'env-sky');
-    el.appendChild(sky);     
+    el.appendChild(sky);
   },
-  update: function (oldData) { 
+  update: function (oldData) {
     this.setEnvOption();
   }
 });

src/json-utils.js

@@ -26,9 +26,11 @@ function getElementData (entity) {
   if (!entity.isEntity) {
     return;
   }
+  // node id's that should save without child nodes
+  const skipChildrenNodes = ['environment'];
   const elementTree = getAttributes(entity);
   const children = entity.childNodes;
-  if (children.length) {
+  if (children.length && !skipChildrenNodes.includes(elementTree.id)) {
     elementTree['children'] = [];
     for (const child of children) {
       if (child.nodeType === Node.ELEMENT_NODE) {
@@ -42,7 +44,7 @@ function getElementData (entity) {
 function getAttributes (entity) {
   const elemObj = {};
 
-  elemObj['element'] = entity.tagName.toLowerCase();  
+  elemObj['element'] = entity.tagName.toLowerCase();
 
   if (entity.id) {
     elemObj['id'] = entity.id;
@@ -54,6 +56,9 @@ function getAttributes (entity) {
   if (entity.getAttribute('mixin')) {
     elemObj['mixin'] = entity.getAttribute('mixin');
   }
+  if (entity.getAttribute('data-layer-name')) {
+    elemObj['data-layer-name'] = entity.getAttribute('data-layer-name');
+  }
   const entityComponents = entity.components;
 
   if (entityComponents) {
@@ -118,8 +123,7 @@ const removeProps = {
   normalMap: {},
   'set-loader-from-hash': '*',
   'create-from-json': '*',
-  street: { JSON: '*' },
-  'street-environment': '*'
+  street: { JSON: '*' }
 };
 // a list of component_name:new_component_name pairs to rename in JSON string
 const renameProps = {
@@ -278,15 +282,28 @@ function getModifiedProperty (entity, componentName) {
   return diff;
 }
 
-function createEntities (entitiesData, parentEl) { 
+function createEntities (entitiesData, parentEl) {
   const sceneElement = document.querySelector('a-scene');
+  const removeEntities = ['environment', 'layers-2d'];
   for (const entityData of entitiesData) {
     if (entityData.id === 'street-container' &&
     entityData.children &&
     entityData.children[0].id === 'default-street' &&
     entityData.children[0].components.hasOwnProperty('set-loader-from-hash')) {
       delete entityData.children[0].components['set-loader-from-hash'];
     }
+
+    const sceneChildElement = document.getElementById(entityData.id);
+    if (sceneChildElement) {
+      if (removeEntities.includes(entityData.id)) {
+        // remove existing elements from scene
+        sceneChildElement.remove();
+      } else {
+        // or save link to the element
+        entityData.entityElement = sceneChildElement;
+      }
+    }
+
     createEntityFromObj(entityData, sceneElement);
   }
 }
@@ -306,9 +323,9 @@ Add a new entity with a list of components and children (if exists)
  * @return {Element} Entity created
 */
 function createEntityFromObj (entityData, parentEl) {
-  const entity = document.createElement(entityData.element);
+  const entity = entityData.entityElement || document.createElement(entityData.element);
 
-  if (parentEl) {
+  if (!entity.parentEl && parentEl) {
     parentEl.appendChild(entity);
   }
 
@@ -325,6 +342,10 @@ function createEntityFromObj (entityData, parentEl) {
     entity.classList.add(...entityData.class);
   }
 
+  if (entityData['data-layer-name']) {
+    entity.setAttribute('data-layer-name', entityData['data-layer-name']);
+  }
+
   entity.addEventListener('loaded', () => {
     // load attributes
     for (const attr in entityData.components) {
@@ -339,10 +360,9 @@ function createEntityFromObj (entityData, parentEl) {
     entity.emit('entitycreated', {}, false);
   });
 
-    if (entityData.children) {
-      for (const childEntityData of entityData.children) {
-        createEntityFromObj(childEntityData, entity);
-      }
-    }    
-  }); 
+  if (entityData.children) {
+    for (const childEntityData of entityData.children) {
+      createEntityFromObj(childEntityData, entity);
+    }
+  }
 }