Add duplicate button. Pass the costume ID to paint (the previous costume ID...

Add duplicate button. Pass the costume ID to paint (the previous costume ID used matches when duplicate is used.) When switching to the costume tab, open the current costume.

src/components/asset-panel/selector.jsx

@@ -13,6 +13,7 @@ const Selector = props => {
         items,
         selectedItemIndex,
         onDeleteClick,
+        onDuplicateClick,
         onItemClick
     } = props;
 
@@ -30,6 +31,7 @@ const Selector = props => {
                         selected={index === selectedItemIndex}
                         onClick={onItemClick}
                         onDeleteButtonClick={onDeleteClick}
+                        onDuplicateButtonClick={onDuplicateClick}
                     />
                 ))}
             </Box>
@@ -58,6 +60,7 @@ Selector.propTypes = {
         name: PropTypes.string.isRequired
     })),
     onDeleteClick: PropTypes.func,
+    onDuplicateClick: PropTypes.func,
     onItemClick: PropTypes.func.isRequired,
     selectedItemIndex: PropTypes.number.isRequired
 };

src/containers/costume-tab.jsx

@@ -51,10 +51,21 @@ class CostumeTab extends React.Component {
         bindAll(this, [
             'handleSelectCostume',
             'handleDeleteCostume',
+            'handleDuplicateCostume',
             'handleNewCostume',
             'handleNewBlankCostume'
         ]);
-        this.state = {selectedCostumeIndex: 0};
+        const {
+            editingTarget,
+            sprites,
+            stage
+        } = props;
+        const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
+        if (target && target.currentCostume) {
+            this.state = {selectedCostumeIndex: target.currentCostume};
+        } else {
+            this.state = {selectedCostumeIndex: 0};
+        }
     }
     componentWillReceiveProps (nextProps) {
         const {
@@ -75,6 +86,10 @@ class CostumeTab extends React.Component {
     handleDeleteCostume (costumeIndex) {
         this.props.vm.deleteCostume(costumeIndex);
     }
+    handleDuplicateCostume (costumeIndex) {
+        this.props.vm.duplicateCostume(costumeIndex);
+        this.setState({selectedCostumeIndex: costumeIndex + 1});
+    }
     handleNewCostume () {
         if (!this.props.vm.editingTarget) return;
         const costumes = this.props.vm.editingTarget.getCostumes() || [];
@@ -127,7 +142,6 @@ class CostumeTab extends React.Component {
         const addBlankMessage = target.isStage ? messages.addBlankBackdropMsg : messages.addBlankCostumeMsg;
         const addLibraryFunc = target.isStage ? onNewLibraryBackdropClick : onNewLibraryCostumeClick;
         const addLibraryIcon = target.isStage ? addLibraryBackdropIcon : addLibraryCostumeIcon;
-
         return (
             <AssetPanel
                 buttons={[
@@ -145,6 +159,7 @@ class CostumeTab extends React.Component {
                 items={target.costumes || []}
                 selectedItemIndex={this.state.selectedCostumeIndex}
                 onDeleteClick={target.costumes.length > 1 ? this.handleDeleteCostume : null}
+                onDuplicateClick={this.handleDuplicateCostume}
                 onItemClick={this.handleSelectCostume}
             >
                 {target.costumes ?
@@ -186,7 +201,8 @@ CostumeTab.propTypes = {
         id: PropTypes.shape({
             costumes: PropTypes.arrayOf(PropTypes.shape({
                 url: PropTypes.string,
-                name: PropTypes.string.isRequired
+                name: PropTypes.string.isRequired,
+                costumeId: PropTypes.number
             }))
         })
     }),

src/containers/paint-editor-wrapper.jsx

@@ -59,7 +59,7 @@ const mapStateToProps = (state, {selectedCostumeIndex}) => {
         name: costume && costume.name,
         rotationCenterX: costume && costume.rotationCenterX,
         rotationCenterY: costume && costume.rotationCenterY,
-        svgId: editingTarget && `${editingTarget}${costume.skinId}`
+        svgId: editingTarget && `${editingTarget}${costume.costumeId}`
     };
 };