Properly update the UI when adding or removing a mixin

src/components/components/CommonComponents.js

@@ -34,15 +34,14 @@ export default class CommonComponents extends React.Component {
       if (detail.entity !== this.props.entity) {
         return;
       }
-      if (DEFAULT_COMPONENTS.indexOf(detail.component) !== -1) {
+      if (
+        DEFAULT_COMPONENTS.indexOf(detail.component) !== -1 ||
+        detail.component === 'mixin'
+      ) {
         this.forceUpdate();
       }
     });
 
-    Events.on('refreshsidebarobject3d', () => {
-      this.forceUpdate();
-    });
-
     var clipboard = new Clipboard('[data-action="copy-entity-to-clipboard"]', {
       text: (trigger) => {
         return getEntityClipboardRepresentation(this.props.entity);

src/components/components/ComponentsContainer.js

@@ -4,15 +4,23 @@ import AddComponent from './AddComponent';
 import Component from './Component';
 import CommonComponents from './CommonComponents';
 import DEFAULT_COMPONENTS from './DefaultComponents';
+import Events from '../../lib/Events';
 
 export default class ComponentsContainer extends React.Component {
   static propTypes = {
     entity: PropTypes.object
   };
 
-  refresh = () => {
-    this.forceUpdate();
-  };
+  componentDidMount() {
+    Events.on('entityupdate', (detail) => {
+      if (detail.entity !== this.props.entity) {
+        return;
+      }
+      if (detail.component === 'mixin') {
+        this.forceUpdate();
+      }
+    });
+  }
 
   render() {
     const entity = this.props.entity;

src/components/components/PropertyRow.js

@@ -2,8 +2,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import Events from '../../lib/Events';
 
 import BooleanWidget from '../widgets/BooleanWidget';
 import ColorWidget from '../widgets/ColorWidget';
@@ -36,19 +34,6 @@ export default class PropertyRow extends React.Component {
   constructor(props) {
     super(props);
     this.id = props.componentname + ':' + props.name;
-
-    if (
-      ['position', 'rotation', 'scale'].indexOf(this.props.componentname) !== -1
-    ) {
-      Events.on(
-        'entitytransformed',
-        debounce((entity) => {
-          if (entity === props.entity) {
-            this.forceUpdate();
-          }
-        }, 250)
-      );
-    }
   }
 
   getWidget() {

src/components/scenegraph/SceneGraph.js

@@ -47,6 +47,11 @@ export default class SceneGraph extends React.Component {
     Events.on('entityidchange', this.rebuildEntityOptions);
     Events.on('entitycreated', this.rebuildEntityOptions);
     Events.on('entityclone', this.rebuildEntityOptions);
+    Events.on('entityupdate', (detail) => {
+      if (detail.component === 'mixin') {
+        this.rebuildEntityOptions();
+      }
+    });
   }
 
   /**

src/lib/viewport.js

@@ -56,8 +56,6 @@ export function Viewport(inspector) {
 
     updateHelpers(object);
 
-    Events.emit('refreshsidebarobject3d', object);
-
     // Emit update event for watcher.
     let component;
     let value;
@@ -85,8 +83,6 @@ export function Viewport(inspector) {
       property: '',
       value: value
     });
-
-    Events.emit('entitytransformed', transformControls.object.el);
   });
 
   transformControls.addEventListener('mouseDown', () => {