Merge pull request #919 from xodio/tweak-860-autoselect-added-node

Auto-select added node and focus workarea

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;

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';

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;

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,

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