Fix animation import issues

src/editor/nodes/KitPieceNode.js

@@ -41,10 +41,10 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
             const clipIndex = node.model.animations.findIndex(animation => animation.name === clip);
 
             if (clipIndex !== -1) {
-              node.activeClipIndices = [clipIndex];
+              node.activeClipItems = node.getActiveItems([clipIndex]);
             }
           } else {
-            node.activeClipIndices = activeClipIndices;
+            node.activeClipItems = node.getActiveItems(activeClipIndices);
           }
         }
 
@@ -514,7 +514,7 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
       receive: this.receiveShadow
     });
 
-    const activeClipIndices = this.getActiveClipIndices().map(index => {
+    const clipIndices = this.activeClipIndices.map(index => {
       return ctx.animations.indexOf(this.model.animations[index]);
     });
 
@@ -526,9 +526,9 @@ export default class KitPieceNode extends EditorNodeMixin(Model) {
       }
     });
 
-    if (activeClipIndices.length > 0) {
+    if (clipIndices.length > 0) {
       this.addGLTFComponent("loop-animation", {
-        activeClipIndices
+        activeClipIndices: clipIndices
       });
     }
 

src/editor/nodes/ModelNode.js

@@ -61,10 +61,10 @@ export default class ModelNode extends EditorNodeMixin(Model) {
             const clipIndex = node.model.animations.findIndex(animation => animation.name === clip);
 
             if (clipIndex !== -1) {
-              node.activeClipIndices = [clipIndex];
+              node.activeClipItems = node.getActiveItems([clipIndex]);
             }
           } else {
-            node.activeClipIndices = activeClipIndices;
+            node.activeClipItems = node.getActiveItems(activeClipIndices);
           }
         }
 
@@ -370,7 +370,7 @@ export default class ModelNode extends EditorNodeMixin(Model) {
       receive: this.receiveShadow
     });
 
-    const activeClipIndices = this.getActiveClipIndices().map(index => {
+    const clipIndices = this.activeClipIndices.map(index => {
       return ctx.animations.indexOf(this.model.animations[index]);
     });
 
@@ -382,9 +382,9 @@ export default class ModelNode extends EditorNodeMixin(Model) {
       }
     });
 
-    if (activeClipIndices.length > 0) {
+    if (clipIndices.length > 0) {
       this.addGLTFComponent("loop-animation", {
-        activeClipIndices
+        activeClipIndices: clipIndices
       });
     }
   }

src/editor/objects/Model.js

@@ -12,7 +12,7 @@ export default class Model extends Object3D {
     this._castShadow = false;
     this._receiveShadow = false;
     this._combine = true;
-    this.activeClipIndices = [];
+    this.activeClipItems = [];
     this.animationMixer = null;
     this.currentActions = [];
   }
@@ -70,7 +70,19 @@ export default class Model extends Object3D {
     return clipOptions;
   }
 
-  getActiveClipIndices() {
+  getActiveItems(indices) {
+    if (this.model && this.model.animations) {
+      return indices
+        .filter(item => item >= 0 && this.model.animations[item])
+        .map(item => {
+          const clip = this.model.animations[item];
+          return { label: clip.name, value: item };
+        });
+    }
+    return null;
+  }
+
+  get activeClipIndices() {
     const activeClipIndices = this.activeClips.map(clip => {
       const index = this.model.animations.indexOf(clip);
       if (index === -1) {
@@ -85,7 +97,7 @@ export default class Model extends Object3D {
 
   get activeClips() {
     if (this.model && this.model.animations) {
-      return this.activeClipIndices
+      return this.activeClipItems
         .filter(item => item.value >= 0)
         .map(item => this.model.animations.find(({ name }) => name === item.label));
     }
@@ -246,7 +258,7 @@ export default class Model extends Object3D {
     }
 
     this._src = source._src;
-    this.activeClipIndices = source.activeClipIndices;
+    this.activeClipItems = source.activeClipItems;
 
     return this;
   }

src/ui/properties/KitPieceNodeEditor.js

@@ -102,8 +102,8 @@ export default class KitPieceNodeEditor extends Component {
     this.props.editor.loadMaterialSlotSelected(subPiece.id, materialSlot.id, materialId);
   };
 
-  onChangeAnimation = activeClipIndices => {
-    this.props.editor.setPropertySelected("activeClipIndices", activeClipIndices || []);
+  onChangeAnimation = activeClipItems => {
+    this.props.editor.setPropertySelected("activeClipItems", activeClipItems || []);
   };
 
   onChangeCollidable = collidable => {
@@ -177,7 +177,7 @@ export default class KitPieceNodeEditor extends Component {
           <SelectInput
             disabled={this.isAnimationPropertyDisabled()}
             options={node.getClipOptions()}
-            value={node.activeClipIndices}
+            value={node.activeClipItems}
             onChange={this.onChangeAnimation}
             className="basic-multi-select"
             classNamePrefix="select"

src/ui/properties/ModelNodeEditor.js

@@ -23,8 +23,8 @@ export default class ModelNodeEditor extends Component {
     this.props.editor.setPropertiesSelected({ ...initialProps, src });
   };
 
-  onChangeAnimation = activeClipIndices => {
-    this.props.editor.setPropertySelected("activeClipIndices", activeClipIndices || []);
+  onChangeAnimation = activeClipItems => {
+    this.props.editor.setPropertySelected("activeClipItems", activeClipItems || []);
   };
 
   onChangeCollidable = collidable => {
@@ -69,7 +69,7 @@ export default class ModelNodeEditor extends Component {
           <SelectInput
             disabled={this.isAnimationPropertyDisabled()}
             options={node.getClipOptions()}
-            value={node.activeClipIndices}
+            value={node.activeClipItems}
             onChange={this.onChangeAnimation}
             className="basic-multi-select"
             classNamePrefix="select"