Merge pull request #56 from magjac/visual-feedback-of-focus

Visual feedback of focus
magjac · Sep 19, 2018 · 09175a3 · 09175a3
2 parents 0f2f06e + fdb0da4
commit 09175a3
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 13 deletions.
diff --git a/src/FormatDrawer.js b/src/FormatDrawer.js
@@ -128,6 +128,7 @@ class FormatDrawer extends React.Component {
   handleClick = () => {
     this.setColorColorPickerOpen(false);
     this.setFillColorColorPickerOpen(false);
+    this.props.onClick();
   };
 
   handleDrawerClose = () => {

diff --git a/src/Graph.js b/src/Graph.js
@@ -259,6 +259,7 @@ class Graph extends React.Component {
   }
 
   handleClickDiv(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -267,6 +268,9 @@ class Graph extends React.Component {
   }
 
   handleKeyDownDocument(d, i, nodes) {
+    if (!this.props.hasFocus) {
+      return;
+    }
     var event = d3_event;
     if (event.target.nodeName !== 'BODY') {
       return;
@@ -343,6 +347,7 @@ class Graph extends React.Component {
   }
 
   handleClickNode(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -354,6 +359,7 @@ class Graph extends React.Component {
   }
 
   handleDblClickNode(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -373,6 +379,7 @@ class Graph extends React.Component {
   }
 
   handleRightClickNode(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -394,6 +401,7 @@ class Graph extends React.Component {
   }
 
   handleClickEdge(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -403,6 +411,7 @@ class Graph extends React.Component {
   }
 
   handleRightClickDiv(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -411,6 +420,7 @@ class Graph extends React.Component {
   }
 
   handleMouseDownSvg(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     if (event.which !== 1) {
@@ -455,6 +465,7 @@ class Graph extends React.Component {
   }
 
   handleMouseUpSvg(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     if (event.which === 1 && this.selectArea) {
@@ -543,8 +554,10 @@ class Graph extends React.Component {
   unSelectComponents() {
     this.selectRects.remove();
     this.selectRects = d3_select(null);
-    this.selectedComponents = d3_selectAll(null);
-    this.props.onSelect([]);
+    if (this.selectedComponents.size() > 0) {
+      this.selectedComponents = d3_selectAll(null);
+      this.props.onSelect([]);
+    }
   }
 
   deleteSelectedComponents() {

diff --git a/src/InsertPanels.js b/src/InsertPanels.js
@@ -130,6 +130,10 @@ class InsertPanels extends React.Component {
     expanded: null,
   };
 
+  handleClick = () => {
+    this.props.onClick();
+  };
+
   handleChange = panel => (event, expanded) => {
     this.setState({
       expanded: expanded ? panel : false,
@@ -153,9 +157,13 @@ class InsertPanels extends React.Component {
     const { expanded } = this.state;
 
     return (
-      <div className={classes.root}>
+      <div className={classes.root} onClick={this.handleClick}>
         {nodeShapeCategories.map((nodeShapeCategory) =>
-          <ExpansionPanel key={nodeShapeCategory.name} expanded={expanded === nodeShapeCategory} onChange={this.handleChange(nodeShapeCategory)}>
+          <ExpansionPanel
+            key={nodeShapeCategory.name}
+            expanded={expanded === nodeShapeCategory}
+            onChange={this.handleChange(nodeShapeCategory)}
+          >
             <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
               <Typography className={classes.heading}>{nodeShapeCategory.name}</Typography>
             </ExpansionPanelSummary>

diff --git a/src/TextEditor.js b/src/TextEditor.js
@@ -103,6 +103,8 @@ class TextEditor extends React.Component {
           onChange={this.handleChange}
           onBeforeLoad={this.handleBeforeLoad}
           onLoad={this.handleLoad}
+          onFocus={this.props.onFocus}
+          onBlur={this.props.onBlur}
           name="UNIQUE_ID_OF_DIV"
           value={this.props.dotSrc}
           // viewport height - app bar - 2 * padding

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -29,6 +29,9 @@ const styles = theme => ({
   }
 });
 
+const defaultElevation = 2;
+const focusedElevation = 8;
+
 class Index extends React.Component {
 
   constructor(props) {
@@ -69,6 +72,14 @@ class Index extends React.Component {
     };
   }
 
+  componentDidMount() {
+    document.onblur = () => {
+      // Needed when the user clicks outside the document,
+      // e.g. the browser address bar
+      this.setFocus(null);
+    }
+  }
+
   setPersistentState = (updater) => {
     this.setState(updater, function (updater) {
       if (typeof updater === 'function') {
@@ -129,13 +140,15 @@ class Index extends React.Component {
     });
   }
 
-  handleInsertClick = () => {
+  handleInsertButtonClick = () => {
+    this.setFocusIf('insertPanelsAreOpen', null, 'InsertPanels')
     this.setPersistentState({
       insertPanelsAreOpen: !this.state.insertPanelsAreOpen,
     });
   }
 
-  handleNodeFormatClick = () => {
+  handleNodeFormatButtonClick = () => {
+    this.setFocusIf('nodeFormatDrawerIsOpen', null, 'NodeFormatDrawer')
     this.setPersistentState({
       nodeFormatDrawerIsOpen: !this.state.nodeFormatDrawerIsOpen,
       edgeFormatDrawerIsOpen: false,
@@ -146,9 +159,11 @@ class Index extends React.Component {
     this.setPersistentState({
       nodeFormatDrawerIsOpen: false,
     });
+    this.setFocus(null);
   }
 
-  handleEdgeFormatClick = () => {
+  handleEdgeFormatButtonClick = () => {
+    this.setFocusIf('edgeFormatDrawerIsOpen', null, 'EdgeFormatDrawer')
     this.setPersistentState({
       edgeFormatDrawerIsOpen: !this.state.edgeFormatDrawerIsOpen,
       nodeFormatDrawerIsOpen: false,
@@ -159,6 +174,7 @@ class Index extends React.Component {
     this.setPersistentState({
       edgeFormatDrawerIsOpen: false,
     });
+    this.setFocus(null);
   }
 
   handleSettingsClick = () => {
@@ -381,9 +397,65 @@ class Index extends React.Component {
     this.redo = redo;
   }
 
+  handleTextEditorFocus = () => {
+    this.setFocus('TextEditor');
+  }
+
+  handleTextEditorBlur = () => {
+    // Needed when the user clicks outside of a pane,
+    // e.g. the app bar or the background
+    this.setFocusIfFocusIs('TextEditor', null);
+  }
+
+  handleGraphFocus = () => {
+    this.setFocus('Graph');
+  }
+
+  handleInsertPanelsClick = () => {
+    this.setFocus('InsertPanels');
+  }
+
+  handleNodeFormatDrawerClick = () => {
+    this.setFocusIf('nodeFormatDrawerIsOpen', 'NodeFormatDrawer', null)
+  }
+
+  handleEdgeFormatDrawerClick = () => {
+    this.setFocus('EdgeFormatDrawer');
+    this.setFocusIf('edgeFormatDrawerIsOpen', 'EdgeFormatDrawer', null)
+  }
+
+  setFocus = (focusedPane) => {
+    this.setState((state) => (state.focusedPane !== focusedPane && {
+      focusedPane: focusedPane,
+    }) || null);
+  }
+
+  setFocusIfFocusIs = (currentlyFocusedPane, newFocusedPane) => {
+    this.setState((state) => (state.focusedPane === currentlyFocusedPane && {
+      focusedPane: newFocusedPane,
+    }) || null);
+  }
+
+  setFocusIf = (stateProperty, focusedPaneIf, focusedPaneElse) => {
+    this.setState((state) => {
+      const focusedPane = state[stateProperty] ? focusedPaneIf: focusedPaneElse;
+      return (state.focusedPane !== focusedPane && {
+        focusedPane: focusedPane,
+      }) || null;
+    });
+  }
+
   render() {
     const { classes } = this.props;
     const editorIsOpen = !this.state.nodeFormatDrawerIsOpen && !this.state.edgeFormatDrawerIsOpen;
+    const textEditorHasFocus = this.state.focusedPane === 'TextEditor';
+    const nodeFormatDrawerHasFocus = this.state.focusedPane === 'NodeFormatDrawer';
+    const edgeFormatDrawerHasFocus = this.state.focusedPane === 'EdgeFormatDrawer';
+    const insertPanelsHaveFocus = this.state.focusedPane === 'InsertPanels';
+    const graphHasFocus = this.state.focusedPane === 'Graph';
+    const leftPaneElevation = textEditorHasFocus || nodeFormatDrawerHasFocus || edgeFormatDrawerHasFocus? focusedElevation : defaultElevation;
+    const rightPaneElevation = graphHasFocus ? focusedElevation : defaultElevation;
+    const midPaneElevation = insertPanelsHaveFocus ? focusedElevation : defaultElevation;
 
     var columns;
     if (this.state.insertPanelsAreOpen && this.state.graphInitialized) {
@@ -407,9 +479,9 @@ class Index extends React.Component {
           onMenuButtonClick={this.handleMainMenuButtonClick}
           onUndoButtonClick={this.handleUndoButtonClick}
           onRedoButtonClick={this.handleRedoButtonClick}
-          onInsertClick={this.handleInsertClick}
-          onNodeFormatClick={this.handleNodeFormatClick}
-          onEdgeFormatClick={this.handleEdgeFormatClick}
+          onInsertClick={this.handleInsertButtonClick}
+          onNodeFormatClick={this.handleNodeFormatButtonClick}
+          onEdgeFormatClick={this.handleEdgeFormatButtonClick}
           onZoomInButtonClick={this.handleZoomInButtonClick}
           onZoomOutButtonClick={this.handleZoomOutButtonClick}
           onZoomOutMapButtonClick={this.handleZoomOutMapButtonClick}
@@ -454,11 +526,12 @@ class Index extends React.Component {
           }}
         >
           <Grid item xs={columns.textEditor}>
-            <Paper className={classes.paper}>
+            <Paper elevation={leftPaneElevation} className={classes.paper}>
               <FormatDrawer
                 type='node'
                 open={this.state.nodeFormatDrawerIsOpen}
                 defaultAttributes={this.state.defaultNodeAttributes}
+                onClick={this.handleNodeFormatDrawerClick}
                 onFormatDrawerClose={this.handleNodeFormatDrawerClose}
                 onStyleChange={this.handleNodeStyleChange}
                 onColorChange={this.handleNodeColorChange}
@@ -468,6 +541,7 @@ class Index extends React.Component {
                 type='edge'
                 open={this.state.edgeFormatDrawerIsOpen}
                 defaultAttributes={this.state.defaultEdgeAttributes}
+                onClick={this.handleEdgeFormatDrawerClick}
                 onFormatDrawerClose={this.handleEdgeFormatDrawerClose}
                 onStyleChange={this.handleEdgeStyleChange}
                 onColorChange={this.handleEdgeColorChange}
@@ -494,8 +568,9 @@ class Index extends React.Component {
           </Grid>
           {this.state.insertPanelsAreOpen && this.state.graphInitialized && (
               <Grid item xs={columns.insertPanels}>
-                <Paper className={classes.paper}>
+                <Paper elevation={midPaneElevation} className={classes.paper}>
                   <InsertPanels
+                    onClick={this.handleInsertPanelsClick}
                     onNodeShapeClick={this.handleNodeShapeClick}
                     onNodeShapeDragStart={this.handleNodeShapeDragStart}
                     onNodeShapeDragEnd={this.handleNodeShapeDragEnd}
@@ -504,8 +579,9 @@ class Index extends React.Component {
               </Grid>
           )}
           <Grid item xs={columns.graph}>
-            <Paper className={classes.paper}>
+            <Paper elevation={rightPaneElevation} className={classes.paper}>
               <Graph
+                hasFocus={graphHasFocus}
                 dotSrc={this.state.dotSrc}
                 engine={this.state.engine}
                 fit={this.state.fitGraph}
@@ -515,6 +591,7 @@ class Index extends React.Component {
                 tweenPrecision={this.state.tweenPrecision}
                 defaultNodeAttributes={this.state.defaultNodeAttributes}
                 defaultEdgeAttributes={this.state.defaultEdgeAttributes}
+                onFocus={this.handleGraphFocus}
                 onTextChange={this.handleTextChange}
                 onHelp={this.handleKeyboardShortcutsClick}
                 onSelect={this.handleGraphComponentSelect}