Skip to content

Commit 7fc6ffe

Browse files
magjacmagjac
committed
Inreased elevation of focused pane, casting more shadow
Resolves #39
1 parent 33049c9 commit 7fc6ffe

File tree

5 files changed

+103
-4
lines changed

5 files changed

+103
-4
lines changed

‎src/FormatDrawer.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ class FormatDrawer extends React.Component {
128128
handleClick = () => {
129129
this.setColorColorPickerOpen(false);
130130
this.setFillColorColorPickerOpen(false);
131+
this.props.onClick();
131132
};
132133

133134
handleDrawerClose = () => {

‎src/Graph.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,7 @@ class Graph extends React.Component {
264264
event.preventDefault();
265265
event.stopPropagation();
266266
this.unSelectComponents();
267+
this.props.onFocus();
267268
}
268269

269270
handleKeyDownDocument(d, i, nodes) {
@@ -351,6 +352,7 @@ class Graph extends React.Component {
351352
let extendSelection = event.ctrlKey || event.shiftKey;
352353
this.selectComponents(d3_select(nodes[i]), extendSelection);
353354
}
355+
this.props.onFocus();
354356
}
355357

356358
handleDblClickNode(d, i, nodes) {
@@ -370,6 +372,7 @@ class Graph extends React.Component {
370372
this.props.onTextChange(this.dotGraph.dotSrc);
371373
}
372374
this.isDrawingEdge = false;
375+
this.props.onFocus();
373376
}
374377

375378
handleRightClickNode(d, i, nodes) {
@@ -391,6 +394,7 @@ class Graph extends React.Component {
391394
this.graphviz
392395
.drawEdge(x0, y0, x0, y0, this.latestEdgeAttributes);
393396
this.isDrawingEdge = true;
397+
this.props.onFocus();
394398
}
395399

396400
handleClickEdge(d, i, nodes) {
@@ -400,6 +404,7 @@ class Graph extends React.Component {
400404
event.stopPropagation();
401405
let extendSelection = event.ctrlKey || event.shiftKey;
402406
this.selectComponents(d3_select(nodes[i]), extendSelection);
407+
this.props.onFocus();
403408
}
404409

405410
handleRightClickDiv(d, i, nodes) {
@@ -408,17 +413,20 @@ class Graph extends React.Component {
408413
event.preventDefault();
409414
event.stopPropagation();
410415
this.unSelectComponents();
416+
this.props.onFocus();
411417
}
412418

413419
handleMouseDownSvg(d, i, nodes) {
414420
document.activeElement.blur();
415421
var event = d3_event;
416422
if (event.which !== 1) {
423+
this.props.onFocus();
417424
return;
418425
}
419426
event.preventDefault();
420427
event.stopPropagation();
421428
if (this.selectArea) {
429+
this.props.onFocus();
422430
return;
423431
}
424432
var [x0, y0] = d3_mouse(this.graph0.node());
@@ -433,6 +441,7 @@ class Graph extends React.Component {
433441
.attr("stroke", '#0000dd')
434442
.style('stroke-width', 0.5)
435443
.style('fill-opacity', 0.3);
444+
this.props.onFocus();
436445
}
437446

438447
handleMouseMoveSvg(d, i, nodes) {
@@ -469,6 +478,7 @@ class Graph extends React.Component {
469478
let height = Math.abs(y1 - y0);
470479
if (width === 0 && height === 0) {
471480
this.selectArea = null;
481+
this.props.onFocus();
472482
return;
473483
}
474484
let components = this.graph0.selectAll('.node,.edge');
@@ -492,6 +502,7 @@ class Graph extends React.Component {
492502
this.insertNodeWithLatestAttributes(x0, y0);
493503
}
494504
}
505+
this.props.onFocus();
495506
}
496507

497508
selectComponents(components, extendSelection=false) {

‎src/InsertPanels.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,10 @@ class InsertPanels extends React.Component {
130130
expanded: null,
131131
};
132132

133+
handleClick = () => {
134+
this.props.onClick();
135+
};
136+
133137
handleChange = panel => (event, expanded) => {
134138
this.setState({
135139
expanded: expanded ? panel : false,
@@ -153,7 +157,7 @@ class InsertPanels extends React.Component {
153157
const { expanded } = this.state;
154158

155159
return (
156-
<div className={classes.root}>
160+
<div className={classes.root} onClick={this.handleClick}>
157161
{nodeShapeCategories.map((nodeShapeCategory) =>
158162
<ExpansionPanel
159163
key={nodeShapeCategory.name}

‎src/TextEditor.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ class TextEditor extends React.Component {
103103
onChange={this.handleChange}
104104
onBeforeLoad={this.handleBeforeLoad}
105105
onLoad={this.handleLoad}
106+
onFocus={this.props.onFocus}
107+
onBlur={this.props.onBlur}
106108
name="UNIQUE_ID_OF_DIV"
107109
value={this.props.dotSrc}
108110
// viewport height - app bar - 2 * padding

‎src/pages/index.js

Lines changed: 84 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ const styles = theme => ({
2929
}
3030
});
3131

32+
const defaultElevation = 2;
33+
const focusedElevation = 8;
34+
3235
class Index extends React.Component {
3336

3437
constructor(props) {
@@ -69,6 +72,14 @@ class Index extends React.Component {
6972
};
7073
}
7174

75+
componentDidMount() {
76+
document.onblur = () => {
77+
this.setState({
78+
focusedPane: null,
79+
});
80+
}
81+
}
82+
7283
setPersistentState = (updater) => {
7384
this.setState(updater, function (updater) {
7485
if (typeof updater === 'function') {
@@ -130,12 +141,18 @@ class Index extends React.Component {
130141
}
131142

132143
handleInsertButtonClick = () => {
144+
this.setState({
145+
focusedPane: this.state.insertPanelsAreOpen ? null : 'InsertPanels',
146+
});
133147
this.setPersistentState({
134148
insertPanelsAreOpen: !this.state.insertPanelsAreOpen,
135149
});
136150
}
137151

138152
handleNodeFormatButtonClick = () => {
153+
this.setState({
154+
focusedPane: this.state.nodeFormatDrawerIsOpen ? null: 'NodeFormatDrawer',
155+
});
139156
this.setPersistentState({
140157
nodeFormatDrawerIsOpen: !this.state.nodeFormatDrawerIsOpen,
141158
edgeFormatDrawerIsOpen: false,
@@ -146,9 +163,15 @@ class Index extends React.Component {
146163
this.setPersistentState({
147164
nodeFormatDrawerIsOpen: false,
148165
});
166+
this.setState({
167+
focusedPane: null,
168+
});
149169
}
150170

151171
handleEdgeFormatButtonClick = () => {
172+
this.setState({
173+
focusedPane: this.state.edgeFormatDrawerIsOpen ? null: 'EdgeFormatDrawer',
174+
});
152175
this.setPersistentState({
153176
edgeFormatDrawerIsOpen: !this.state.edgeFormatDrawerIsOpen,
154177
nodeFormatDrawerIsOpen: false,
@@ -159,6 +182,9 @@ class Index extends React.Component {
159182
this.setPersistentState({
160183
edgeFormatDrawerIsOpen: false,
161184
});
185+
this.setState({
186+
focusedPane: null,
187+
});
162188
}
163189

164190
handleSettingsClick = () => {
@@ -381,9 +407,59 @@ class Index extends React.Component {
381407
this.redo = redo;
382408
}
383409

410+
handleTextEditorFocus = () => {
411+
this.setState({
412+
focusedPane: 'TextEditor',
413+
});
414+
}
415+
416+
handleTextEditorBlur = () => {
417+
if (this.state.focusedPane === 'TextEditor') {
418+
this.setState({
419+
focusedPane: null,
420+
});
421+
}
422+
}
423+
424+
handleGraphFocus = () => {
425+
this.setState({
426+
focusedPane: 'Graph',
427+
});
428+
}
429+
430+
handleInsertPanelsClick = () => {
431+
this.setState({
432+
focusedPane: 'InsertPanels',
433+
});
434+
}
435+
436+
handleNodeFormatDrawerClick = () => {
437+
this.setState((state) => {
438+
return {
439+
focusedPane: state.nodeFormatDrawerIsOpen ? 'NodeFormatDrawer' : null,
440+
}
441+
});
442+
}
443+
444+
handleEdgeFormatDrawerClick = () => {
445+
this.setState((state) => {
446+
return {
447+
focusedPane: state.edgeFormatDrawerIsOpen ? 'EdgeFormatDrawer' : null,
448+
}
449+
});
450+
}
451+
384452
render() {
385453
const { classes } = this.props;
386454
const editorIsOpen = !this.state.nodeFormatDrawerIsOpen && !this.state.edgeFormatDrawerIsOpen;
455+
const textEditorHasFocus = this.state.focusedPane === 'TextEditor';
456+
const nodeFormatDrawerHasFocus = this.state.focusedPane === 'NodeFormatDrawer';
457+
const edgeFormatDrawerHasFocus = this.state.focusedPane === 'EdgeFormatDrawer';
458+
const insertPanelsHaveFocus = this.state.focusedPane === 'InsertPanels';
459+
const graphHasFocus = this.state.focusedPane === 'Graph';
460+
const leftPaneElevation = textEditorHasFocus || nodeFormatDrawerHasFocus || edgeFormatDrawerHasFocus? focusedElevation : defaultElevation;
461+
const rightPaneElevation = graphHasFocus ? focusedElevation : defaultElevation;
462+
const midPaneElevation = insertPanelsHaveFocus ? focusedElevation : defaultElevation;
387463

388464
var columns;
389465
if (this.state.insertPanelsAreOpen && this.state.graphInitialized) {
@@ -454,11 +530,12 @@ class Index extends React.Component {
454530
}}
455531
>
456532
<Grid item xs={columns.textEditor}>
457-
<Paper className={classes.paper}>
533+
<Paper elevation={leftPaneElevation} className={classes.paper}>
458534
<FormatDrawer
459535
type='node'
460536
open={this.state.nodeFormatDrawerIsOpen}
461537
defaultAttributes={this.state.defaultNodeAttributes}
538+
onClick={this.handleNodeFormatDrawerClick}
462539
onFormatDrawerClose={this.handleNodeFormatDrawerClose}
463540
onStyleChange={this.handleNodeStyleChange}
464541
onColorChange={this.handleNodeColorChange}
@@ -468,6 +545,7 @@ class Index extends React.Component {
468545
type='edge'
469546
open={this.state.edgeFormatDrawerIsOpen}
470547
defaultAttributes={this.state.defaultEdgeAttributes}
548+
onClick={this.handleEdgeFormatDrawerClick}
471549
onFormatDrawerClose={this.handleEdgeFormatDrawerClose}
472550
onStyleChange={this.handleEdgeStyleChange}
473551
onColorChange={this.handleEdgeColorChange}
@@ -494,8 +572,9 @@ class Index extends React.Component {
494572
</Grid>
495573
{this.state.insertPanelsAreOpen && this.state.graphInitialized && (
496574
<Grid item xs={columns.insertPanels}>
497-
<Paper className={classes.paper}>
575+
<Paper elevation={midPaneElevation} className={classes.paper}>
498576
<InsertPanels
577+
onClick={this.handleInsertPanelsClick}
499578
onNodeShapeClick={this.handleNodeShapeClick}
500579
onNodeShapeDragStart={this.handleNodeShapeDragStart}
501580
onNodeShapeDragEnd={this.handleNodeShapeDragEnd}
@@ -504,8 +583,9 @@ class Index extends React.Component {
504583
</Grid>
505584
)}
506585
<Grid item xs={columns.graph}>
507-
<Paper className={classes.paper}>
586+
<Paper elevation={rightPaneElevation} className={classes.paper}>
508587
<Graph
588+
hasFocus={graphHasFocus}
509589
dotSrc={this.state.dotSrc}
510590
engine={this.state.engine}
511591
fit={this.state.fitGraph}
@@ -515,6 +595,7 @@ class Index extends React.Component {
515595
tweenPrecision={this.state.tweenPrecision}
516596
defaultNodeAttributes={this.state.defaultNodeAttributes}
517597
defaultEdgeAttributes={this.state.defaultEdgeAttributes}
598+
onFocus={this.handleGraphFocus}
518599
onTextChange={this.handleTextChange}
519600
onHelp={this.handleKeyboardShortcutsClick}
520601
onSelect={this.handleGraphComponentSelect}

0 commit comments

Comments
 (0)