Backport fixes from inspector 2

src/components/street-environment.js

@@ -17,7 +17,11 @@ AFRAME.registerComponent('street-environment', {
         'cloudy'
       ]
     },
-    backgroundColor: { type: 'color', default: '#555555' }
+    backgroundColor: {
+      type: 'color',
+      default: '#555555',
+      if: { preset: ['color'] }
+    }
   },
 
   init: function () {

src/components/street-generated-clones.js

@@ -18,17 +18,21 @@ AFRAME.registerComponent('street-generated-clones', {
     mode: { default: 'fixed', oneOf: ['fixed', 'random', 'single'] },
 
     // Spacing for fixed and random modes
-    spacing: { default: 15, type: 'number' }, // minimum distance between objects
+    spacing: { default: 15, type: 'number', if: { mode: ['fixed', 'random'] } }, // minimum distance between objects
 
     // Fixed mode properties
-    cycleOffset: { default: 0.5, type: 'number' }, // offset as a fraction of spacing, only for fixed
+    cycleOffset: { default: 0.5, type: 'number', if: { mode: ['fixed'] } }, // offset as a fraction of spacing, only for fixed
 
     // Random mode properties
-    count: { default: 1, type: 'number' },
+    count: { default: 1, type: 'number', if: { mode: ['random'] } },
 
     // Single mode properties
-    justify: { default: 'middle', oneOf: ['start', 'middle', 'end'] },
-    padding: { default: 4, type: 'number' }
+    justify: {
+      default: 'middle',
+      oneOf: ['start', 'middle', 'end'],
+      if: { mode: ['single'] }
+    },
+    padding: { default: 4, type: 'number', if: { mode: ['single'] } }
   },
 
   init: function () {

src/editor/components/components/Component.js

@@ -110,10 +110,33 @@ export default class Component extends React.Component {
 
     return Object.keys(componentData.schema)
       .sort()
-      .map((propertyName, idx) => (
-        <div className="detailed" key={idx}>
+      .filter((propertyName) => {
+        if (!componentData.schema[propertyName].if) {
+          return true;
+        }
+        let showProperty = true;
+        for (const [conditionKey, conditionValue] of Object.entries(
+          componentData.schema[propertyName].if
+        )) {
+          if (Array.isArray(conditionValue)) {
+            if (
+              conditionValue.indexOf(componentData.data[conditionKey]) === -1
+            ) {
+              showProperty = false;
+              break;
+            }
+          } else {
+            if (conditionValue !== componentData.data[conditionKey]) {
+              showProperty = false;
+              break;
+            }
+          }
+        }
+        return showProperty;
+      })
+      .map((propertyName) => (
+        <div className="detailed" key={propertyName}>
           <PropertyRow
-            key={propertyName}
             name={propertyName}
             schema={componentData.schema[propertyName]}
             data={componentData.data[propertyName]}

src/editor/components/components/EnviroSidebar.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import PropertyRow from './PropertyRow';
+import AdvancedComponents from './AdvancedComponents';
 
 const EnviroSidebar = ({ entity }) => {
   const componentName = 'street-environment';
@@ -34,6 +35,11 @@ const EnviroSidebar = ({ entity }) => {
               />
             </>
           )}
+          {entity && entity.components && (
+            <div className="propertyRow">
+              <AdvancedComponents entity={entity} />
+            </div>
+          )}
         </div>
       </div>
     </div>

src/editor/lib/commands/EntityCloneCommand.js

@@ -31,6 +31,7 @@ export class EntityCloneCommand extends Command {
       clone.addEventListener(
         'loaded',
         function () {
+          clone.pause();
           Events.emit('entityclone', clone);
           AFRAME.INSPECTOR.selectEntity(clone);
         },

src/editor/lib/entity.js

@@ -537,35 +537,14 @@ export function createUniqueId() {
 }
 
 export function getComponentClipboardRepresentation(entity, componentName) {
-  /**
-   * Get the list of modified properties
-   * @param  {Element} entity        Entity where the component belongs
-   * @param  {string} componentName Component name
-   * @return {object}               List of modified properties with their value
-   */
-  function getModifiedProperties(entity, componentName) {
-    var data = entity.components[componentName].data;
-    var defaultData = entity.components[componentName].schema;
-    var diff = {};
-    for (var key in data) {
-      // Prevent adding unknown attributes
-      if (!defaultData[key]) {
-        continue;
-      }
-
-      var defaultValue = defaultData[key].default;
-      var currentValue = data[key];
-
-      // Some parameters could be null and '' like mergeTo
-      if ((currentValue || defaultValue) && currentValue !== defaultValue) {
-        diff[key] = data[key];
-      }
-    }
-    return diff;
+  entity.flushToDOM();
+  const data = entity.getDOMAttribute(componentName);
+  if (!data) {
+    return componentName;
   }
 
-  const diff = getModifiedProperties(entity, componentName);
-  const attributes = AFRAME.utils.styleParser.stringify(diff);
+  const schema = entity.components[componentName].schema;
+  const attributes = stringifyComponentValue(schema, data);
   return `${componentName}="${attributes}"`;
 }