Fix some UI issues (#638)

* avoid error when attrValue is undefined (for example material component set via a mixin for shortOrange entity)

* fix wrong number type for animation loop property

* prevent copy to clipboard buttons to expand/collapse the panel

* refresh SceneGraph after cloning entity

* remove unused variables (this fixes the warning for SphereBufferGeometry in three r144)

* call helper update() only if the helper has an update method

Author: vincentfretin

src/components/components/CommonComponents.js

@@ -105,6 +105,7 @@ export default class CommonComponents extends React.Component {
           className="gltfIcon"
           onClick={event => {
             this.exportToGLTF();
+            event.preventDefault();
             event.stopPropagation();
           }} >
           <img src={process.env.NODE_ENV === 'production' ? 'https://aframe.io/aframe-inspector/assets/gltf.svg' : '../assets/gltf.svg'} />
@@ -114,7 +115,10 @@ export default class CommonComponents extends React.Component {
           title="Copy entity HTML to clipboard"
           data-action="copy-entity-to-clipboard"
           className="button fa fa-clipboard"
-          onClick={event => event.stopPropagation()}
+          onClick={event => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
         />
       </div>
     );

src/components/components/Component.js

@@ -149,6 +149,10 @@ export default class Component extends React.Component {
               data-component={subComponentName || componentName}
               className="button fa fa-clipboard"
               href="#"
+              onClick={event => {
+                event.preventDefault();
+                event.stopPropagation();
+              }}
             />
             <a
               title="Remove component"

src/components/components/PropertyRow.js

@@ -46,7 +46,11 @@ export default class PropertyRow extends React.Component {
     const isMap =
       props.componentname === 'material' &&
       (props.name === 'envMap' || props.name === 'src');
-    const type = props.schema.type;
+    let type = props.schema.type;
+    if (props.componentname === 'animation' && props.name === 'loop') {
+      // fix wrong number type for animation loop property
+      type = 'boolean';
+    }
 
     const value =
       props.schema.type === 'selector'

src/components/scenegraph/SceneGraph.js

@@ -47,6 +47,7 @@ export default class SceneGraph extends React.Component {
     this.rebuildEntityOptions();
     Events.on('entityidchange', this.rebuildEntityOptions);
     Events.on('entitycreated', this.rebuildEntityOptions);
+    Events.on('entityclone', this.rebuildEntityOptions);
   }
 
   /**

src/components/widgets/TextureWidget.js

@@ -93,7 +93,8 @@ export default class TextureWidget extends React.Component {
     if (!component) {
       return;
     }
-    var newValue = component.attrValue[this.props.name];
+    // component.attrValue may be undefined if component is from a mixin
+    var newValue = component.attrValue && component.attrValue[this.props.name];
 
     // This will be triggered typically when the element is changed directly with element.setAttribute
     if (newValue && newValue !== this.state.value) {

src/index.js

@@ -103,12 +103,6 @@ Inspector.prototype = {
   },
 
   addHelper: (function() {
-    const geometry = new THREE.SphereBufferGeometry(2, 4, 2);
-    const material = new THREE.MeshBasicMaterial({
-      color: 0xff0000,
-      visible: false
-    });
-
     return function(object) {
       let helper;
 
@@ -132,7 +126,10 @@ Inspector.prototype = {
       helper.visible = false;
       this.sceneHelpers.add(helper);
       this.helpers[object.uuid] = helper;
-      helper.update();
+      // SkeletonHelper doesn't have an update method
+      if (helper.update) {
+        helper.update();
+      }
     };
   })(),
 

src/lib/viewport.js

@@ -41,7 +41,7 @@ function Viewport(inspector) {
 
   function updateHelpers(object) {
     object.traverse(node => {
-      if (inspector.helpers[node.uuid]) {
+      if (inspector.helpers[node.uuid] && inspector.helpers[node.uuid].update) {
         inspector.helpers[node.uuid].update();
       }
     });