Merge branch 'master' into dev

Author: vincentfretin

src/components/components/Component.js

@@ -6,6 +6,7 @@ import PropertyRow from './PropertyRow';
 import Collapsible from '../Collapsible';
 import copy from 'clipboard-copy';
 import { getComponentClipboardRepresentation } from '../../lib/entity';
+import { shouldShowProperty } from '../../lib/utils';
 import Events from '../../lib/Events';
 
 const isSingleProperty = AFRAME.schema.isSingleProperty;
@@ -93,30 +94,7 @@ export default class Component extends React.Component {
 
     return Object.keys(componentData.schema)
       .sort()
-      .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;
-      })
+      .filter((propertyName) => shouldShowProperty(propertyName, componentData))
       .map((propertyName) => (
         <PropertyRow
           key={propertyName}
@@ -131,21 +109,13 @@ export default class Component extends React.Component {
   };
 
   render() {
-    let componentName = this.props.name;
-    let subComponentName = '';
-    if (componentName.indexOf('__') !== -1) {
-      subComponentName = componentName;
-      componentName = componentName.substr(0, componentName.indexOf('__'));
-    }
+    const componentName = this.props.name;
 
     return (
       <Collapsible collapsed={this.props.isCollapsed}>
         <div className="componentHeader collapsible-header">
-          <span
-            className="componentTitle"
-            title={subComponentName || componentName}
-          >
-            <span>{subComponentName || componentName}</span>
+          <span className="componentTitle" title={componentName}>
+            <span>{componentName}</span>
           </span>
           <div className="componentHeaderActions">
             <a
@@ -157,7 +127,7 @@ export default class Component extends React.Component {
                 copy(
                   getComponentClipboardRepresentation(
                     this.state.entity,
-                    (subComponentName || componentName).toLowerCase()
+                    componentName.toLowerCase()
                   )
                 );
               }}

src/components/components/PropertyRow.js

@@ -12,6 +12,7 @@ import TextureWidget from '../widgets/TextureWidget';
 import Vec4Widget from '../widgets/Vec4Widget';
 import Vec3Widget from '../widgets/Vec3Widget';
 import Vec2Widget from '../widgets/Vec2Widget';
+import { equal } from '../../lib/utils';
 
 export default class PropertyRow extends React.Component {
   static propTypes = {
@@ -128,6 +129,30 @@ export default class PropertyRow extends React.Component {
     }
   }
 
+  isPropertyDefined() {
+    const props = this.props;
+    let definedValue;
+    let defaultValue;
+    // getDOMAttribute returns null if the component doesn't exist, and
+    // in the case of a multi-properties component it returns undefined
+    // if it exists but has the default values.
+    if (props.isSingle) {
+      definedValue = props.entity.getDOMAttribute(props.componentname);
+      if (definedValue === null) return false;
+      defaultValue =
+        props.entity.components[props.componentname].schema.default;
+      return !equal(definedValue, defaultValue);
+    } else {
+      definedValue = (props.entity.getDOMAttribute(props.componentname) || {})[
+        props.name
+      ];
+      if (definedValue === undefined) return false;
+      defaultValue =
+        props.entity.components[props.componentname].schema[props.name].default;
+      return !equal(definedValue, defaultValue);
+    }
+  }
+
   render() {
     const props = this.props;
     const value =
@@ -139,10 +164,7 @@ export default class PropertyRow extends React.Component {
 
     const className = clsx({
       propertyRow: true,
-      propertyRowDefined: props.isSingle
-        ? !!props.entity.getDOMAttribute(props.componentname)
-        : props.name in
-          (props.entity.getDOMAttribute(props.componentname) || {})
+      propertyRowDefined: this.isPropertyDefined()
     });
 
     return (

src/index.js

@@ -297,7 +297,6 @@ Inspector.prototype = {
 
   /**
    * Closes the editor and gives the control back to the scene
-   * @return {[type]} [description]
    */
   close: function () {
     this.opened = false;

src/lib/entity.js

@@ -36,9 +36,9 @@ export function updateEntity(entity, component, property, value) {
  * Remove an entity.
  *
  * @param {Element} entity Entity to remove.
- * @param {boolean} force (Optional) If true it won't ask for confirmation.
+ * @param {boolean} [force=false] If true it won't ask for confirmation.
  */
-export function removeEntity(entity, force) {
+export function removeEntity(entity, force = false) {
   if (entity) {
     if (
       force === true ||
@@ -80,9 +80,9 @@ export function findClosestEntity(entity) {
 
 /**
  * Remove the selected entity
- * @param  {boolean} force (Optional) If true it won't ask for confirmation
+ * @param {boolean} [force=false] If true it won't ask for confirmation.
  */
-export function removeSelectedEntity(force) {
+export function removeSelectedEntity(force = false) {
   if (AFRAME.INSPECTOR.selectedEntity) {
     removeEntity(AFRAME.INSPECTOR.selectedEntity, force);
   }
@@ -640,14 +640,27 @@ export function createUniqueId() {
 
 export function getComponentClipboardRepresentation(entity, componentName) {
   entity.flushToDOM();
-  const data = entity.getDOMAttribute(componentName);
+  let data = entity.getDOMAttribute(componentName);
   if (!data) {
     return componentName;
   }
 
-  const schema = entity.components[componentName].schema;
-  const attributes = stringifyComponentValue(schema, data);
-  return `${componentName}="${attributes}"`;
+  const component = entity.components[componentName];
+  const schema = component.schema;
+  // If multi-properties component, filter out properties that are the same as their default value
+  if (!isSingleProperty(schema)) {
+    data = { ...data };
+
+    for (const [propertyName, value] of Object.entries(data)) {
+      const defaultValue = getDefaultValue(component, propertyName);
+      if (equal(value, defaultValue)) {
+        delete data[propertyName];
+      }
+    }
+  }
+
+  const properties = stringifyComponentValue(schema, data);
+  return `${componentName}="${properties}"`;
 }
 
 const NOT_COMPONENTS = ['id', 'class', 'mixin'];

src/lib/utils.js

@@ -103,3 +103,44 @@ export function areVectorsEqual(v1, v2) {
     Object.is(v1.w, v2.w)
   );
 }
+
+/**
+ * Check if a property should be shown in the UI based on the `if` object
+ * condition included in the schema for the property.
+ *
+ * When more than one property is used in the object, this applies a logical AND.
+ * When the value is an array, it means one of the entries in this array.
+ *
+ * Example in the light component:
+ * ```js
+ * {
+ *   penumbra: {default: 0, min: 0, max: 1, if: {type: ['spot']}},
+ * }
+ * ```
+ *
+ * @param {string} propertyName - The name of the property
+ * @param {Component} component - The component instance
+ * @returns {boolean} Whether the property should be shown
+ */
+export function shouldShowProperty(propertyName, component) {
+  if (!component.schema[propertyName].if) {
+    return true;
+  }
+  let showProperty = true;
+  for (const [conditionKey, conditionValue] of Object.entries(
+    component.schema[propertyName].if
+  )) {
+    if (Array.isArray(conditionValue)) {
+      if (conditionValue.indexOf(component.data[conditionKey]) === -1) {
+        showProperty = false;
+        break;
+      }
+    } else {
+      if (conditionValue !== component.data[conditionKey]) {
+        showProperty = false;
+        break;
+      }
+    }
+  }
+  return showProperty;
+}

src/style/components.styl

@@ -1,11 +1,5 @@
 @import './lib';
 
-propertyRowDefined() {
-  .propertyRowDefined {
-    {block}
-  }
-}
-
 .components
   background-color $bg
   color $white
@@ -14,18 +8,6 @@ propertyRowDefined() {
   position fixed
   width 331px
 
-div.vec2,
-div.vec3,
-div.vec4
-  display inline
-
-.vec2 input.number,
-.vec3 input.number
-  width 40px
-
-.vec4 input.number
-  width 34px
-
 .collapsible-header
   align-items center
   display flex
@@ -112,6 +94,19 @@ div.vec4
     vertical-align middle
     width 118px
 
+  input.number
+    width 40px
+
+  .vec2 input.number,
+  .vec3 input.number
+    width 40px
+
+  .vec4 input.number
+    width 34px
+
+  .vec2, .vec3, vec4
+    display inline
+
   .map_value
     margin 0 0 0 5px
     width 68px