In getComponentClipboardRepresentation filter out properties that are the same as their default value, and modify the propertyRowDefined class calculation to the same to have the property in white if it's different from the default value (#816)

Author: vincentfretin

src/components/components/PropertyRow.js

@@ -13,6 +13,7 @@ import Vec4Widget from '../widgets/Vec4Widget';
 import Vec3Widget from '../widgets/Vec3Widget';
 import Vec2Widget from '../widgets/Vec2Widget';
 import { updateEntity } from '../../lib/entity';
+import { equal } from '../../lib/utils';
 
 export default class PropertyRow extends React.Component {
   static propTypes = {
@@ -129,6 +130,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 =
@@ -140,10 +165,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/lib/entity.js

@@ -503,14 +503,27 @@ function getUniqueId(baseId) {
 
 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}"`;
 }
 
 /**