diff --git a/packages/xod-client/src/editor/components/Suggester.jsx b/packages/xod-client/src/editor/components/Suggester.jsx index 39d8f4f1..e2e9b5ae 100644 --- a/packages/xod-client/src/editor/components/Suggester.jsx +++ b/packages/xod-client/src/editor/components/Suggester.jsx @@ -35,7 +35,10 @@ class Suggester extends React.Component { componentDidMount() { if (this.input) { // A hack to avoid typing "i" into input when pressing Hotkey - setTimeout(() => this.input.focus(), 1); + setTimeout(() => { + this.input.focus(); + this.props.onInitialFocus(); + }, 1); } } @@ -157,6 +160,7 @@ Suggester.defaultProps = { addClassName: '', onBlur: () => {}, onHighlight: () => {}, + onInitialFocus: () => {}, }; Suggester.propTypes = { @@ -165,6 +169,7 @@ Suggester.propTypes = { onAddNode: PropTypes.func.isRequired, onHighlight: PropTypes.func, onBlur: PropTypes.func, + onInitialFocus: PropTypes.func, }; export default Suggester; diff --git a/packages/xod-client/src/editor/constants.js b/packages/xod-client/src/editor/constants.js index 0e263eae..9b0d1a55 100644 --- a/packages/xod-client/src/editor/constants.js +++ b/packages/xod-client/src/editor/constants.js @@ -61,6 +61,7 @@ export const FOCUS_AREAS = { PROJECT_BROWSER: 'PROJECT_BROWSER', INSPECTOR: 'INSPECTOR', WORKAREA: 'WORKAREA', + NODE_SUGGESTER: 'NODE_SUGGESTER', }; export const CLIPBOARD_DATA_TYPE = 'text/xod-entities'; diff --git a/packages/xod-client/src/editor/containers/Editor.jsx b/packages/xod-client/src/editor/containers/Editor.jsx index 4653f8af..6a1c47a5 100644 --- a/packages/xod-client/src/editor/containers/Editor.jsx +++ b/packages/xod-client/src/editor/containers/Editor.jsx @@ -168,6 +168,7 @@ class Editor extends React.Component { index={patchesIndex} onAddNode={this.onAddNode} onBlur={this.hideSuggester} + onInitialFocus={() => this.props.actions.setFocusedArea(FOCUS_AREAS.NODE_SUGGESTER)} onHighlight={this.props.actions.highlightSugessterItem} /> ) : null; diff --git a/packages/xod-client/src/editor/containers/Patch/index.jsx b/packages/xod-client/src/editor/containers/Patch/index.jsx index af708479..3275625a 100644 --- a/packages/xod-client/src/editor/containers/Patch/index.jsx +++ b/packages/xod-client/src/editor/containers/Patch/index.jsx @@ -18,7 +18,7 @@ import sanctuaryPropType from '../../../utils/sanctuaryPropType'; import dropTarget from './dropTarget'; -import { EDITOR_MODE, TAB_TYPES } from '../../constants'; +import { EDITOR_MODE, TAB_TYPES, FOCUS_AREAS } from '../../constants'; import selectingMode from './modes/selecting'; import linkingMode from './modes/linking'; @@ -70,6 +70,15 @@ class Patch extends React.Component { } } + componentDidUpdate(prevProps) { + if ( + this.props.focusedArea !== prevProps.focusedArea && + this.props.focusedArea === FOCUS_AREAS.WORKAREA + ) { + this.dropTargetRootRef.firstChild.focus(); + } + } + getApi(mode) { return { props: this.props, @@ -140,6 +149,7 @@ Patch.propTypes = { tabType: PropTypes.string, ghostLink: PropTypes.any, offset: PropTypes.object, + focusedArea: PropTypes.string.isRequired, onDoubleClick: PropTypes.func.isRequired, connectDropTarget: PropTypes.func.isRequired, isDebugSession: PropTypes.bool, @@ -157,6 +167,7 @@ const mapStateToProps = R.applySpec({ tabType: EditorSelectors.getCurrentTabType, ghostLink: ProjectSelectors.getLinkGhost, offset: EditorSelectors.getCurrentPatchOffset, + focusedArea: EditorSelectors.getFocusedArea, draggedPreviewSize: EditorSelectors.getDraggedPreviewSize, isDebugSession: DebugSelectors.isDebugSession, nodeValues: DebugSelectors.getWatchNodeValuesForCurrentPatch, diff --git a/packages/xod-client/src/editor/reducer.js b/packages/xod-client/src/editor/reducer.js index d4da1602..d891ac56 100644 --- a/packages/xod-client/src/editor/reducer.js +++ b/packages/xod-client/src/editor/reducer.js @@ -7,7 +7,12 @@ import * as PAT from '../project/actionTypes'; import * as DAT from '../debugger/actionTypes'; import { DEFAULT_PANNING_OFFSET } from '../project/nodeLayout'; -import { TAB_TYPES, DEBUGGER_TAB_ID } from './constants'; +import { + DEBUGGER_TAB_ID, + FOCUS_AREAS, + SELECTION_ENTITY_TYPE, + TAB_TYPES, +} from './constants'; import { createSelectionEntity, getNewSelection, getTabByPatchPath } from './utils'; import { setCurrentPatchOffset, switchPatchUnsafe } from './actions'; @@ -428,7 +433,6 @@ const editorReducer = (state = {}, action) => { state ); case EAT.EDITOR_SET_SELECION: - case EAT.PASTE_ENTITIES: return R.set( R.compose(currentTabLens, selectionLens), getNewSelection(action.payload.entities), @@ -440,6 +444,32 @@ const editorReducer = (state = {}, action) => { case PAT.LINK_ADD: return R.set(R.compose(currentTabLens, linkingPinLens), null, state); + // + // Adding entities + // + case EAT.PASTE_ENTITIES: + return R.compose( + R.set( + R.compose(currentTabLens, selectionLens), + getNewSelection(action.payload.entities), + ), + R.assoc('focusedArea', FOCUS_AREAS.WORKAREA) + )(state); + case PAT.NODE_ADD: + return R.compose( + R.set( + R.compose(currentTabLens, selectionLens), + [ + createSelectionEntity( + SELECTION_ENTITY_TYPE.NODE, + action.payload.newNodeId + ), + ] + ), + R.assoc('focusedArea', FOCUS_AREAS.WORKAREA), + R.assoc('draggedPreviewSize', { width: 0, height: 0 }) + )(state); + // // tabs management // @@ -513,8 +543,6 @@ const editorReducer = (state = {}, action) => { // case EAT.START_DRAGGING_PATCH: return R.assoc('draggedPreviewSize', action.payload, state); - case PAT.NODE_ADD: - return R.assoc('draggedPreviewSize', { width: 0, height: 0 }, state); // // focused area