Merge pull request #2303 from sjhuang26/issue-2188-backdrop

Fix "Opening the backdrop library causes the stage backdrop editor to become selected"

src/components/action-menu/action-menu.jsx

@@ -76,8 +76,8 @@ class ActionMenu extends React.Component {
         // (possibly slow) action is started.
         return event => {
             ReactTooltip.hide();
+            if (fn) fn(event);
             this.setState({forceHide: true, isOpen: false}, () => {
-                if (fn) fn(event);
                 setTimeout(() => this.setState({forceHide: false}));
             });
         };

src/components/gui/gui.jsx

@@ -15,6 +15,8 @@ import StageWrapper from '../../containers/stage-wrapper.jsx';
 import Loader from '../loader/loader.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
+import CostumeLibrary from '../../containers/costume-library.jsx';
+import BackdropLibrary from '../../containers/backdrop-library.jsx';
 
 import Backpack from '../../containers/backpack.jsx';
 import PreviewModal from '../../containers/preview-modal.jsx';
@@ -46,10 +48,12 @@ const GUIComponent = props => {
     const {
         activeTabIndex,
         basePath,
+        backdropLibraryVisible,
         backpackOptions,
         blocksTabVisible,
         cardsVisible,
         children,
+        costumeLibraryVisible,
         costumesTabVisible,
         enableCommunity,
         importInfoVisible,
@@ -60,6 +64,8 @@ const GUIComponent = props => {
         onActivateCostumesTab,
         onActivateSoundsTab,
         onActivateTab,
+        onRequestCloseBackdropLibrary,
+        onRequestCloseCostumeLibrary,
         previewInfoVisible,
         targetIsStage,
         soundsTabVisible,
@@ -112,6 +118,18 @@ const GUIComponent = props => {
             {cardsVisible ? (
                 <Cards />
             ) : null}
+            {costumeLibraryVisible ? (
+                <CostumeLibrary
+                    vm={vm}
+                    onRequestClose={onRequestCloseCostumeLibrary}
+                />
+            ) : null}
+            {backdropLibraryVisible ? (
+                <BackdropLibrary
+                    vm={vm}
+                    onRequestClose={onRequestCloseBackdropLibrary}
+                />
+            ) : null}
             <MenuBar enableCommunity={enableCommunity} />
             <Box className={styles.bodyWrapper}>
                 <Box className={styles.flexWrapper}>
@@ -227,6 +245,7 @@ const GUIComponent = props => {
 };
 GUIComponent.propTypes = {
     activeTabIndex: PropTypes.number,
+    backdropLibraryVisible: PropTypes.bool,
     backpackOptions: PropTypes.shape({
         host: PropTypes.string,
         visible: PropTypes.bool
@@ -235,6 +254,7 @@ GUIComponent.propTypes = {
     blocksTabVisible: PropTypes.bool,
     cardsVisible: PropTypes.bool,
     children: PropTypes.node,
+    costumeLibraryVisible: PropTypes.bool,
     costumesTabVisible: PropTypes.bool,
     enableCommunity: PropTypes.bool,
     importInfoVisible: PropTypes.bool,
@@ -245,6 +265,8 @@ GUIComponent.propTypes = {
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
+    onRequestCloseBackdropLibrary: PropTypes.func,
+    onRequestCloseCostumeLibrary: PropTypes.func,
     onTabSelect: PropTypes.func,
     previewInfoVisible: PropTypes.bool,
     soundsTabVisible: PropTypes.bool,

src/containers/backdrop-library.jsx

@@ -2,8 +2,14 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {connect} from 'react-redux';
 import VM from 'scratch-vm';
 
+import {
+    activateTab,
+    COSTUMES_TAB_INDEX
+} from '../reducers/editor-tab';
+
 import analytics from '../lib/analytics';
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import backdropTags from '../lib/libraries/backdrop-tags';
@@ -33,6 +39,8 @@ class BackdropLibrary extends React.Component {
             bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
             skinId: null
         };
+        this.props.vm.setEditingTarget(this.props.stageID);
+        this.props.onActivateTab(COSTUMES_TAB_INDEX);
         this.props.vm.addBackdrop(item.md5, vmBackdrop);
         analytics.event({
             category: 'library',
@@ -56,8 +64,21 @@ class BackdropLibrary extends React.Component {
 
 BackdropLibrary.propTypes = {
     intl: intlShape.isRequired,
+    onActivateTab: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func,
+    stageID: PropTypes.string.isRequired,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default injectIntl(BackdropLibrary);
+const mapStateToProps = state => ({
+    stageID: state.scratchGui.targets.stage.id
+});
+
+const mapDispatchToProps = dispatch => ({
+    onActivateTab: tab => dispatch(activateTab(tab))
+});
+
+export default injectIntl(connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(BackdropLibrary));

src/containers/costume-tab.jsx

@@ -6,8 +6,6 @@ import VM from 'scratch-vm';
 
 import AssetPanel from '../components/asset-panel/asset-panel.jsx';
 import PaintEditorWrapper from './paint-editor-wrapper.jsx';
-import CostumeLibrary from './costume-library.jsx';
-import BackdropLibrary from './backdrop-library.jsx';
 import CameraModal from './camera-modal.jsx';
 import {connect} from 'react-redux';
 import {handleFileUpload, costumeUpload} from '../lib/file-uploader.js';
@@ -15,8 +13,6 @@ import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 
 import {
     closeCameraCapture,
-    closeCostumeLibrary,
-    closeBackdropLibrary,
     openCameraCapture,
     openCostumeLibrary,
     openBackdropLibrary
@@ -209,16 +205,11 @@ class CostumeTab extends React.Component {
             onNewCostumeFromCameraClick,
             onNewLibraryBackdropClick,
             onNewLibraryCostumeClick,
-            backdropLibraryVisible,
             cameraModalVisible,
-            costumeLibraryVisible,
-            onRequestCloseBackdropLibrary,
             onRequestCloseCameraModal,
-            onRequestCloseCostumeLibrary,
             editingTarget,
             sprites,
-            stage,
-            vm
+            stage
         } = this.props;
 
         const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
@@ -284,18 +275,6 @@ class CostumeTab extends React.Component {
                     /> :
                     null
                 }
-                {costumeLibraryVisible ? (
-                    <CostumeLibrary
-                        vm={vm}
-                        onRequestClose={onRequestCloseCostumeLibrary}
-                    />
-                ) : null}
-                {backdropLibraryVisible ? (
-                    <BackdropLibrary
-                        vm={vm}
-                        onRequestClose={onRequestCloseBackdropLibrary}
-                    />
-                ) : null}
                 {cameraModalVisible ? (
                     <CameraModal
                         onClose={onRequestCloseCameraModal}
@@ -308,17 +287,13 @@ class CostumeTab extends React.Component {
 }
 
 CostumeTab.propTypes = {
-    backdropLibraryVisible: PropTypes.bool,
     cameraModalVisible: PropTypes.bool,
-    costumeLibraryVisible: PropTypes.bool,
     editingTarget: PropTypes.string,
     intl: intlShape,
     onNewCostumeFromCameraClick: PropTypes.func.isRequired,
     onNewLibraryBackdropClick: PropTypes.func.isRequired,
     onNewLibraryCostumeClick: PropTypes.func.isRequired,
-    onRequestCloseBackdropLibrary: PropTypes.func.isRequired,
     onRequestCloseCameraModal: PropTypes.func.isRequired,
-    onRequestCloseCostumeLibrary: PropTypes.func.isRequired,
     sprites: PropTypes.shape({
         id: PropTypes.shape({
             costumes: PropTypes.arrayOf(PropTypes.shape({
@@ -340,9 +315,7 @@ const mapStateToProps = state => ({
     editingTarget: state.scratchGui.targets.editingTarget,
     sprites: state.scratchGui.targets.sprites,
     stage: state.scratchGui.targets.stage,
-    cameraModalVisible: state.scratchGui.modals.cameraCapture,
-    costumeLibraryVisible: state.scratchGui.modals.costumeLibrary,
-    backdropLibraryVisible: state.scratchGui.modals.backdropLibrary
+    cameraModalVisible: state.scratchGui.modals.cameraCapture
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -357,12 +330,6 @@ const mapDispatchToProps = dispatch => ({
     onNewCostumeFromCameraClick: () => {
         dispatch(openCameraCapture());
     },
-    onRequestCloseBackdropLibrary: () => {
-        dispatch(closeBackdropLibrary());
-    },
-    onRequestCloseCostumeLibrary: () => {
-        dispatch(closeCostumeLibrary());
-    },
     onRequestCloseCameraModal: () => {
         dispatch(closeCameraCapture());
     }

src/containers/gui.jsx

@@ -14,6 +14,11 @@ import {
     SOUNDS_TAB_INDEX
 } from '../reducers/editor-tab';
 
+import {
+    closeCostumeLibrary,
+    closeBackdropLibrary
+} from '../reducers/modals';
+
 import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
 import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
 
@@ -103,8 +108,10 @@ GUI.defaultProps = GUIComponent.defaultProps;
 
 const mapStateToProps = state => ({
     activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
+    backdropLibraryVisible: state.scratchGui.modals.backdropLibrary,
     blocksTabVisible: state.scratchGui.editorTab.activeTabIndex === BLOCKS_TAB_INDEX,
     cardsVisible: state.scratchGui.cards.visible,
+    costumeLibraryVisible: state.scratchGui.modals.costumeLibrary,
     costumesTabVisible: state.scratchGui.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
     importInfoVisible: state.scratchGui.modals.importInfo,
     isPlayerOnly: state.scratchGui.mode.isPlayerOnly,
@@ -122,7 +129,9 @@ const mapDispatchToProps = dispatch => ({
     onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
     onActivateTab: tab => dispatch(activateTab(tab)),
     onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
-    onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX))
+    onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
+    onRequestCloseBackdropLibrary: () => dispatch(closeBackdropLibrary()),
+    onRequestCloseCostumeLibrary: () => dispatch(closeCostumeLibrary())
 });
 
 const ConnectedGUI = connect(

src/containers/stage-selector.jsx

@@ -119,8 +119,7 @@ const mapStateToProps = (state, {assetId, id}) => ({
 
 const mapDispatchToProps = dispatch => ({
     onNewBackdropClick: e => {
-        e.preventDefault();
-        dispatch(activateTab(COSTUMES_TAB_INDEX));
+        e.stopPropagation();
         dispatch(openBackdropLibrary());
     },
     onActivateTab: tabIndex => {