Skip to content

Commit

Permalink
Remember widget maximized/minimized state (#80)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheton
cheton committed Sep 17, 2016
1 parent ebbf150 commit 77b563a
Show file tree
Hide file tree
Showing 12 changed files with 158 additions and 94 deletions.
11 changes: 11 additions & 0 deletions src/web/store/index.js
View file
Expand Up @@ -38,6 +38,7 @@ const defaultState = {
},
widgets: {
axes: {
minimized: false,
axes: ['x', 'y', 'z'],
jog: {
keypad: false,
Expand All @@ -52,6 +53,7 @@ const defaultState = {
}
},
connection: {
minimized: false,
controller: {
type: 'Grbl' // Grbl or TinyG2
},
Expand All @@ -60,10 +62,13 @@ const defaultState = {
autoReconnect: true
},
console: {
minimized: false
},
gcode: {
minimized: false
},
grbl: {
minimized: false,
panel: {
parserState: {
expanded: true
Expand All @@ -74,17 +79,21 @@ const defaultState = {
}
},
macro: {
minimized: false
},
probe: {
minimized: false,
probeCommand: 'G38.2',
probeDepth: 10,
probeFeedrate: 20,
tlo: 10,
retractionDistance: 4
},
spindle: {
minimized: false
},
tinyg2: {
minimized: false,
panel: {
queueReports: {
expanded: true
Expand All @@ -98,9 +107,11 @@ const defaultState = {
}
},
visualizer: {
minimized: false,
animation: true
},
webcam: {
minimized: false,
disabled: false,

// local - Use a built-in camera or a connected webcam
Expand Down
45 changes: 23 additions & 22 deletions src/web/widgets/Axes/index.jsx
View file
Expand Up @@ -166,29 +166,30 @@ class AxesWidget extends Component {
return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
}
componentDidUpdate(prevProps, prevState) {
// The custom distance will not persist to store while toggling between in and mm
if ((prevState.customDistance !== this.state.customDistance) &&
(prevState.units === this.state.units)) {
let customDistance = this.state.customDistance;
if (this.state.units === IMPERIAL_UNITS) {
customDistance = in2mm(customDistance);
}
// To save in mm
store.set('widgets.axes.jog.customDistance', Number(customDistance));
}
const {
units,
minimized,
axes,
keypadJogging,
selectedDistance, // '1', '0.1', '0.01', '0.001', or ''
customDistance
} = this.state;

if (prevState.selectedDistance !== this.state.selectedDistance) {
// '1', '0.1', '0.01', '0.001' or ''
store.set('widgets.axes.jog.selectedDistance', this.state.selectedDistance);
}
store.set('widgets.axes.minimized', minimized);
store.set('widgets.axes.axes', axes);
store.set('widgets.axes.jog.keypad', keypadJogging);
store.set('widgets.axes.jog.selectedDistance', selectedDistance);

if (prevState.keypadJogging !== this.state.keypadJogging) {
store.set('widgets.axes.jog.keypad', this.state.keypadJogging);
// The custom distance will not persist to store while toggling between in and mm
if ((prevState.customDistance !== customDistance) && (prevState.units === units)) {
const distance = (units === IMPERIAL_UNITS) ? in2mm(customDistance) : customDistance;
// Save customDistance in mm
store.set('widgets.axes.jog.customDistance', Number(distance));
}
}
getDefaultState() {
return {
isCollapsed: false,
minimized: store.get('widgets.axes.minimized', false),
isFullscreen: false,
canClick: true, // Defaults to true
port: controller.port,
Expand Down Expand Up @@ -355,7 +356,7 @@ class AxesWidget extends Component {
}
render() {
const { sortableHandleClassName } = this.props;
const { isCollapsed, isFullscreen } = this.state;
const { minimized, isFullscreen } = this.state;
const { units, machinePosition, workPosition } = this.state;
const state = {
...this.state,
Expand Down Expand Up @@ -399,13 +400,13 @@ class AxesWidget extends Component {
</Widget.Button>
<Widget.Button
title={i18n._('Expand/Collapse')}
onClick={(event, val) => this.setState({ isCollapsed: !isCollapsed })}
onClick={(event, val) => this.setState({ minimized: !minimized })}
>
<i
className={classNames(
'fa',
{ 'fa-chevron-up': !isCollapsed },
{ 'fa-chevron-down': isCollapsed }
{ 'fa-chevron-up': !minimized },
{ 'fa-chevron-down': minimized }
)}
/>
</Widget.Button>
Expand All @@ -432,7 +433,7 @@ class AxesWidget extends Component {
<Widget.Content
styleName={classNames(
'widget-content',
{ 'hidden': isCollapsed }
{ 'hidden': minimized }
)}
>
<Axes
Expand Down
20 changes: 14 additions & 6 deletions src/web/widgets/Connection/index.jsx
View file
Expand Up @@ -4,6 +4,7 @@ import React, { Component, PropTypes } from 'react';
import CSSModules from 'react-css-modules';
import Widget from '../../components/Widget';
import i18n from '../../lib/i18n';
import store from '../../store';
import Connection from './Connection';
import styles from './index.styl';

Expand All @@ -14,16 +15,23 @@ class ConnectionWidget extends Component {
};

state = {
isCollapsed: false,
minimized: store.get('widgets.connection.minimized', false),
isFullscreen: false
};

shouldComponentUpdate(nextProps, nextState) {
return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
}
componentDidUpdate(prevProps, prevState) {
const {
minimized
} = this.state;

store.set('widgets.connection.minimized', minimized);
}
render() {
const { sortableHandleClassName } = this.props;
const { isCollapsed, isFullscreen } = this.state;
const { minimized, isFullscreen } = this.state;

return (
<Widget fullscreen={isFullscreen}>
Expand All @@ -32,13 +40,13 @@ class ConnectionWidget extends Component {
<Widget.Controls>
<Widget.Button
title={i18n._('Expand/Collapse')}
onClick={(event, val) => this.setState({ isCollapsed: !isCollapsed })}
onClick={(event, val) => this.setState({ minimized: !minimized })}
>
<i
className={classNames(
'fa',
{ 'fa-chevron-up': !isCollapsed },
{ 'fa-chevron-down': isCollapsed }
{ 'fa-chevron-up': !minimized },
{ 'fa-chevron-down': minimized }
)}
/>
</Widget.Button>
Expand All @@ -59,7 +67,7 @@ class ConnectionWidget extends Component {
<Widget.Content
styleName={classNames(
'widget-content',
{ 'hidden': isCollapsed }
{ 'hidden': minimized }
)}
>
<Connection />
Expand Down
20 changes: 14 additions & 6 deletions src/web/widgets/Console/index.jsx
View file
Expand Up @@ -7,6 +7,7 @@ import CSSModules from 'react-css-modules';
import Widget from '../../components/Widget';
import controller from '../../lib/controller';
import i18n from '../../lib/i18n';
import store from '../../store';
import Console from './Console';
import {
SCROLL_BUFFER_SIZE
Expand Down Expand Up @@ -65,9 +66,16 @@ class ConsoleWidget extends Component {
shouldComponentUpdate(nextProps, nextState) {
return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
}
componentDidUpdate(prevProps, prevState) {
const {
minimized
} = this.state;

store.set('widgets.console.minimized', minimized);
}
getDefaultState() {
return {
isCollapsed: false,
minimized: store.get('widgets.console.minimized', false),
isFullscreen: false,
port: controller.port,
containerHeight: 240,
Expand Down Expand Up @@ -121,7 +129,7 @@ class ConsoleWidget extends Component {
}
render() {
const { sortableHandleClassName } = this.props;
const { isCollapsed, isFullscreen } = this.state;
const { minimized, isFullscreen } = this.state;
const state = {
...this.state
};
Expand All @@ -143,13 +151,13 @@ class ConsoleWidget extends Component {
<Widget.Controls>
<Widget.Button
title={i18n._('Expand/Collapse')}
onClick={(event, val) => this.setState({ isCollapsed: !isCollapsed })}
onClick={(event, val) => this.setState({ minimized: !minimized })}
>
<i
className={classNames(
'fa',
{ 'fa-chevron-up': !isCollapsed },
{ 'fa-chevron-down': isCollapsed }
{ 'fa-chevron-up': !minimized },
{ 'fa-chevron-down': minimized }
)}
/>
</Widget.Button>
Expand Down Expand Up @@ -179,7 +187,7 @@ class ConsoleWidget extends Component {
}}
styleName={classNames(
'widget-content',
{ 'hidden': isCollapsed },
{ 'hidden': minimized },
{ 'fullscreen': isFullscreen }
)}
>
Expand Down
20 changes: 14 additions & 6 deletions src/web/widgets/GCode/index.jsx
View file
Expand Up @@ -11,6 +11,7 @@ import controller from '../../lib/controller';
import i18n from '../../lib/i18n';
import log from '../../lib/log';
import { mm2in } from '../../lib/units';
import store from '../../store';
import GCode from './GCode';
import {
// Units
Expand Down Expand Up @@ -132,9 +133,16 @@ class GCodeWidget extends Component {
shouldComponentUpdate(nextProps, nextState) {
return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
}
componentDidUpdate(prevProps, prevState) {
const {
minimized
} = this.state;

store.set('widgets.gcode.minimized', minimized);
}
getDefaultState() {
return {
isCollapsed: false,
minimized: store.get('widgets.gcode.minimized', false),
isFullscreen: false,

port: controller.port,
Expand Down Expand Up @@ -311,7 +319,7 @@ class GCodeWidget extends Component {
}
render() {
const { sortableHandleClassName } = this.props;
const { isCollapsed, isFullscreen } = this.state;
const { minimized, isFullscreen } = this.state;
const { units, bbox } = this.state;
const state = {
...this.state,
Expand All @@ -330,13 +338,13 @@ class GCodeWidget extends Component {
<Widget.Controls>
<Widget.Button
title={i18n._('Expand/Collapse')}
onClick={(event, val) => this.setState({ isCollapsed: !isCollapsed })}
onClick={(event, val) => this.setState({ minimized: !minimized })}
>
<i
className={classNames(
'fa',
{ 'fa-chevron-up': !isCollapsed },
{ 'fa-chevron-down': isCollapsed }
{ 'fa-chevron-up': !minimized },
{ 'fa-chevron-down': minimized }
)}
/>
</Widget.Button>
Expand All @@ -363,7 +371,7 @@ class GCodeWidget extends Component {
<Widget.Content
styleName={classNames(
'widget-content',
{ 'hidden': isCollapsed }
{ 'hidden': minimized }
)}
>
<GCode
Expand Down
26 changes: 14 additions & 12 deletions src/web/widgets/Grbl/index.jsx
View file
Expand Up @@ -51,16 +51,18 @@ class GrblWidget extends Component {
return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state);
}
componentDidUpdate(prevProps, prevState) {
if (prevState.panel.parserState.expanded !== this.state.panel.parserState.expanded) {
store.set('widgets.grbl.panel.parserState.expanded', this.state.panel.parserState.expanded);
}
if (prevState.panel.modalGroups.expanded !== this.state.panel.modalGroups.expanded) {
store.set('widgets.grbl.panel.modalGroups.expanded', this.state.panel.modalGroups.expanded);
}
const {
minimized,
panel
} = this.state;

store.set('widgets.grbl.minimized', minimized);
store.set('widgets.grbl.panel.parserState.expanded', panel.parserState.expanded);
store.set('widgets.grbl.panel.modalGroups.expanded', panel.modalGroups.expanded);
}
getDefaultState() {
return {
isCollapsed: false,
minimized: store.get('widgets.grbl.minimized', false),
isFullscreen: false,
canClick: true, // Defaults to true
port: controller.port,
Expand Down Expand Up @@ -153,7 +155,7 @@ class GrblWidget extends Component {
}
render() {
const { sortableHandleClassName } = this.props;
const { isCollapsed, isFullscreen } = this.state;
const { minimized, isFullscreen } = this.state;
const state = {
...this.state,
canClick: this.canClick()
Expand All @@ -170,13 +172,13 @@ class GrblWidget extends Component {
<Widget.Controls>
<Widget.Button
title={i18n._('Expand/Collapse')}
onClick={(event, val) => this.setState({ isCollapsed: !isCollapsed })}
onClick={(event, val) => this.setState({ minimized: !minimized })}
>
<i
className={classNames(
'fa',
{ 'fa-chevron-up': !isCollapsed },
{ 'fa-chevron-down': isCollapsed }
{ 'fa-chevron-up': !minimized },
{ 'fa-chevron-down': minimized }
)}
/>
</Widget.Button>
Expand All @@ -203,7 +205,7 @@ class GrblWidget extends Component {
<Widget.Content
styleName={classNames(
'widget-content',
{ 'hidden': isCollapsed }
{ 'hidden': minimized }
)}
>
<Grbl
Expand Down

0 comments on commit 77b563a

Please sign in to comment.