diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx index 012206517..b69707781 100644 --- a/src/components/asset-panel/selector.jsx +++ b/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} /> ))} @@ -58,6 +60,7 @@ Selector.propTypes = { name: PropTypes.string.isRequired })), onDeleteClick: PropTypes.func, + onDuplicateClick: PropTypes.func, onItemClick: PropTypes.func.isRequired, selectedItemIndex: PropTypes.number.isRequired }; diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx index bb48f1b5d..1692ddee6 100644 --- a/src/containers/costume-tab.jsx +++ b/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 ( 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 })) }) }), diff --git a/src/containers/paint-editor-wrapper.jsx b/src/containers/paint-editor-wrapper.jsx index 38cb3aa4a..ad248b83f 100644 --- a/src/containers/paint-editor-wrapper.jsx +++ b/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}` }; };