From ab1645b311f0e49513fee9b2633e0337b3dd7d35 Mon Sep 17 00:00:00 2001 From: sjhuang26 Date: Fri, 8 Jun 2018 15:11:40 -0400 Subject: [PATCH 1/3] Initial work --- src/components/gui/gui.jsx | 22 +++++++++++++++++ src/containers/backdrop-library.jsx | 17 ++++++++++++- src/containers/costume-tab.jsx | 37 ++--------------------------- src/containers/gui.jsx | 11 ++++++++- src/containers/stage-selector.jsx | 1 - 5 files changed, 50 insertions(+), 38 deletions(-) diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 66a08f64f..80535e83e 100644 --- a/src/components/gui/gui.jsx +++ b/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 ? ( ) : null} + {costumeLibraryVisible ? ( + + ) : null} + {backdropLibraryVisible ? ( + + ) : null} @@ -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, diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx index 98604bf18..aa5e12c7e 100644 --- a/src/containers/backdrop-library.jsx +++ b/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'; @@ -34,6 +40,7 @@ class BackdropLibrary extends React.Component { skinId: null }; this.props.vm.addBackdrop(item.md5, vmBackdrop); + this.props.onActivateTab(COSTUMES_TAB_INDEX); analytics.event({ category: 'library', action: 'Select Backdrop', @@ -56,8 +63,16 @@ class BackdropLibrary extends React.Component { BackdropLibrary.propTypes = { intl: intlShape.isRequired, + onActivateTab: PropTypes.func.isRequired, onRequestClose: PropTypes.func, vm: PropTypes.instanceOf(VM).isRequired }; -export default injectIntl(BackdropLibrary); +const mapDispatchToProps = dispatch => ({ + onActivateTab: tab => dispatch(activateTab(tab)) +}); + +export default injectIntl(connect( + null, + mapDispatchToProps, +)(BackdropLibrary)); diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx index 3ce034caa..08546f857 100644 --- a/src/containers/costume-tab.jsx +++ b/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 ? ( - - ) : null} - {backdropLibraryVisible ? ( - - ) : null} {cameraModalVisible ? ( ({ 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()); } diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx index 79a85c9dc..c80217ba6 100644 --- a/src/containers/gui.jsx +++ b/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'; @@ -100,8 +105,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, @@ -119,7 +126,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( diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx index 4d8474600..e9c2c230f 100644 --- a/src/containers/stage-selector.jsx +++ b/src/containers/stage-selector.jsx @@ -120,7 +120,6 @@ const mapStateToProps = (state, {assetId, id}) => ({ const mapDispatchToProps = dispatch => ({ onNewBackdropClick: e => { e.preventDefault(); - dispatch(activateTab(COSTUMES_TAB_INDEX)); dispatch(openBackdropLibrary()); }, onActivateTab: tabIndex => { From 866fb27d50eee4ea115721d6ac056c0c18366e7b Mon Sep 17 00:00:00 2001 From: sjhuang26 Date: Fri, 8 Jun 2018 16:03:55 -0400 Subject: [PATCH 2/3] Fix action menu click bubbling --- src/components/action-menu/action-menu.jsx | 2 +- src/containers/stage-selector.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx index 69d154fcc..2725c502b 100644 --- a/src/components/action-menu/action-menu.jsx +++ b/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})); }); }; diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx index e9c2c230f..8fb136a8a 100644 --- a/src/containers/stage-selector.jsx +++ b/src/containers/stage-selector.jsx @@ -119,7 +119,7 @@ const mapStateToProps = (state, {assetId, id}) => ({ const mapDispatchToProps = dispatch => ({ onNewBackdropClick: e => { - e.preventDefault(); + e.stopPropagation(); dispatch(openBackdropLibrary()); }, onActivateTab: tabIndex => { From 246da29621eb42766de2364aeb324b82c302cd42 Mon Sep 17 00:00:00 2001 From: sjhuang26 Date: Fri, 8 Jun 2018 17:26:50 -0400 Subject: [PATCH 3/3] Fix bug --- src/containers/backdrop-library.jsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx index aa5e12c7e..5a0266038 100644 --- a/src/containers/backdrop-library.jsx +++ b/src/containers/backdrop-library.jsx @@ -39,8 +39,9 @@ class BackdropLibrary extends React.Component { bitmapResolution: item.info.length > 2 ? item.info[2] : 1, skinId: null }; - this.props.vm.addBackdrop(item.md5, vmBackdrop); + this.props.vm.setEditingTarget(this.props.stageID); this.props.onActivateTab(COSTUMES_TAB_INDEX); + this.props.vm.addBackdrop(item.md5, vmBackdrop); analytics.event({ category: 'library', action: 'Select Backdrop', @@ -65,14 +66,19 @@ BackdropLibrary.propTypes = { intl: intlShape.isRequired, onActivateTab: PropTypes.func.isRequired, onRequestClose: PropTypes.func, + stageID: PropTypes.string.isRequired, vm: PropTypes.instanceOf(VM).isRequired }; +const mapStateToProps = state => ({ + stageID: state.scratchGui.targets.stage.id +}); + const mapDispatchToProps = dispatch => ({ onActivateTab: tab => dispatch(activateTab(tab)) }); export default injectIntl(connect( - null, - mapDispatchToProps, + mapStateToProps, + mapDispatchToProps )(BackdropLibrary));