Resolve an issue that widget control buttons cannot work after maximi…

…zing (#81)
cncjs · Sep 19, 2016 · 585dca4 · 585dca4
1 parent b1b518e
commit 585dca4
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 102 deletions.
diff --git a/src/web/containers/Workspace/PrimaryWidgets.jsx b/src/web/containers/Workspace/PrimaryWidgets.jsx
@@ -64,6 +64,10 @@ class PrimaryWidgets extends Component {
             <Widget
                 widgetid={widgetid}
                 key={widgetid}
+                sortable={{
+                    handleClassName: 'sortable-handle',
+                    filterClassName: 'sortable-filter'
+                }}
                 onDelete={() => {
                     this.handleDeleteWidget(widgetid);
                 }}
@@ -81,7 +85,8 @@ class PrimaryWidgets extends Component {
                         pull: true,
                         put: ['secondary']
                     },
-                    handle: '.sortable-handle', // Sortable handle selector
+                    handle: '.sortable-handle', // Drag handle selector within list items
+                    filter: '.sortable-filter', // Selectors that do not lead to dragging
                     chosenClass: 'sortable-chosen', // Class name for the chosen item
                     ghostClass: 'sortable-ghost', // Class name for the drop placeholder
                     dataIdAttr: 'data-widgetid',

diff --git a/src/web/containers/Workspace/SecondaryWidgets.jsx b/src/web/containers/Workspace/SecondaryWidgets.jsx
@@ -64,6 +64,10 @@ class SecondaryWidgets extends Component {
             <Widget
                 widgetid={widgetid}
                 key={widgetid}
+                sortable={{
+                    handleClassName: 'sortable-handle',
+                    filterClassName: 'sortable-filter'
+                }}
                 onDelete={() => {
                     this.handleDeleteWidget(widgetid);
                 }}
@@ -81,7 +85,8 @@ class SecondaryWidgets extends Component {
                         pull: true,
                         put: ['primary']
                     },
-                    handle: '.sortable-handle', // Sortable handle selector
+                    handle: '.sortable-handle', // Drag handle selector within list items
+                    filter: '.sortable-filter', // Selectors that do not lead to dragging
                     chosenClass: 'sortable-chosen', // Class name for the chosen item
                     ghostClass: 'sortable-ghost', // Class name for the drop placeholder
                     dataIdAttr: 'data-widgetid',

diff --git a/src/web/containers/Workspace/Widget.jsx b/src/web/containers/Workspace/Widget.jsx
@@ -11,98 +11,61 @@ import TinyG2Widget from '../../widgets/TinyG2';
 import VisualizerWidget from '../../widgets/Visualizer';
 import WebcamWidget from '../../widgets/Webcam';
 
-const sortableHandleClassName = 'sortable-handle';
-
-const Widget = (props) => {
-    const {
-        widgetid,
-        onDelete,
-        ...others
-    } = props;
+const Widget = ({ widgetid, key, ...props }) => {
     const widget = {
         'axes': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <AxesWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <AxesWidget {...props} />
             </div>
         ),
         'connection': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <ConnectionWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <ConnectionWidget {...props} />
             </div>
         ),
         'console': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <ConsoleWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <ConsoleWidget {...props} />
             </div>
         ),
         'gcode': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <GCodeWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <GCodeWidget {...props} />
             </div>
         ),
         'grbl': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <GrblWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <GrblWidget {...props} />
             </div>
         ),
         'macro': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <MacroWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <MacroWidget {...props} />
             </div>
         ),
         'probe': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <ProbeWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <ProbeWidget {...props} />
             </div>
         ),
         'spindle': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <SpindleWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <SpindleWidget {...props} />
             </div>
         ),
         'tinyg2': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <TinyG2Widget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <TinyG2Widget {...props} />
             </div>
         ),
         'visualizer': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <VisualizerWidget />
+            <div data-widgetid={widgetid} key={key}>
+                <VisualizerWidget {...props} />
             </div>
         ),
         'webcam': () => (
-            <div {...others} data-widgetid={widgetid}>
-                <WebcamWidget
-                    onDelete={onDelete}
-                    sortableHandleClassName={sortableHandleClassName}
-                />
+            <div data-widgetid={widgetid} key={key}>
+                <WebcamWidget {...props} />
             </div>
         )
     }[widgetid];

diff --git a/src/web/widgets/Axes/index.jsx b/src/web/widgets/Axes/index.jsx
@@ -73,7 +73,7 @@ const normalizeToRange = (n, min, max) => {
 class AxesWidget extends Component {
     static propTypes = {
         onDelete: PropTypes.func,
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
     static defaultProps = {
         onDelete: () => {}
@@ -355,7 +355,6 @@ class AxesWidget extends Component {
         return defaultWCS;
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
         const { units, machinePosition, workPosition } = this.state;
         const state = {
@@ -383,9 +382,9 @@ class AxesWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className={this.props.sortable.handleClassName}>
                     <Widget.Title>{i18n._('Axes')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Edit')}
                             onClick={(event) => {

diff --git a/src/web/widgets/Connection/index.jsx b/src/web/widgets/Connection/index.jsx
@@ -11,7 +11,7 @@ import styles from './index.styl';
 @CSSModules(styles, { allowMultiple: true })
 class ConnectionWidget extends Component {
     static propTypes = {
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
 
     state = {
@@ -30,14 +30,13 @@ class ConnectionWidget extends Component {
         store.set('widgets.connection.minimized', minimized);
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className={this.props.sortable.handleClassName}>
                     <Widget.Title>{i18n._('Connection')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Expand/Collapse')}
                             onClick={(event, val) => this.setState({ minimized: !minimized })}

diff --git a/src/web/widgets/Console/index.jsx b/src/web/widgets/Console/index.jsx
@@ -18,7 +18,7 @@ import styles from './index.styl';
 class ConsoleWidget extends Component {
     static propTypes = {
         onDelete: PropTypes.func,
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
     static defaultProps = {
         onDelete: () => {}
@@ -128,7 +128,6 @@ class ConsoleWidget extends Component {
         this.lineBuffers = [];
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
         const state = {
             ...this.state
@@ -146,9 +145,9 @@ class ConsoleWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className={this.props.sortable.handleClassName}>
                     <Widget.Title>{i18n._('Console')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Expand/Collapse')}
                             onClick={(event, val) => this.setState({ minimized: !minimized })}

diff --git a/src/web/widgets/GCode/index.jsx b/src/web/widgets/GCode/index.jsx
@@ -42,7 +42,7 @@ const toFixedUnits = (units, val) => {
 class GCodeWidget extends Component {
     static propTypes = {
         onDelete: PropTypes.func,
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
     static defaultProps = {
         onDelete: () => {}
@@ -318,7 +318,6 @@ class GCodeWidget extends Component {
         }
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
         const { units, bbox } = this.state;
         const state = {
@@ -333,9 +332,9 @@ class GCodeWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className={this.props.sortable.handleClassName}>
                     <Widget.Title>{i18n._('G-code')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Expand/Collapse')}
                             onClick={(event, val) => this.setState({ minimized: !minimized })}

diff --git a/src/web/widgets/Grbl/index.jsx b/src/web/widgets/Grbl/index.jsx
@@ -17,7 +17,7 @@ import styles from './index.styl';
 class GrblWidget extends Component {
     static propTypes = {
         onDelete: PropTypes.func,
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
     static defaultProps = {
         onDelete: () => {}
@@ -154,7 +154,6 @@ class GrblWidget extends Component {
         });
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
         const state = {
             ...this.state,
@@ -167,9 +166,9 @@ class GrblWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className="widget-header">
                     <Widget.Title>{i18n._('Grbl')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Expand/Collapse')}
                             onClick={(event, val) => this.setState({ minimized: !minimized })}

diff --git a/src/web/widgets/Macro/index.jsx b/src/web/widgets/Macro/index.jsx
@@ -18,7 +18,7 @@ import styles from './index.styl';
 class MacroWidget extends Component {
     static propTypes = {
         onDelete: PropTypes.func,
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
     static defaultProps = {
         onDelete: () => {}
@@ -139,7 +139,6 @@ class MacroWidget extends Component {
         }
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
         const state = {
             ...this.state
@@ -154,9 +153,9 @@ class MacroWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className={this.props.sortable.handleClassName}>
                     <Widget.Title>{i18n._('Macro')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Expand/Collapse')}
                             onClick={(event, val) => this.setState({ minimized: !minimized })}

diff --git a/src/web/widgets/Probe/index.jsx b/src/web/widgets/Probe/index.jsx
@@ -44,7 +44,7 @@ const toUnits = (units, val) => {
 class ProbeWidget extends Component {
     static propTypes = {
         onDelete: PropTypes.func,
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
     static defaultProps = {
         onDelete: () => {}
@@ -346,7 +346,6 @@ class ProbeWidget extends Component {
         this.sendCommand('G90');
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
         const state = {
             ...this.state,
@@ -363,9 +362,9 @@ class ProbeWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className={this.props.sortable.handleClassName}>
                     <Widget.Title>{i18n._('Probe')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Expand/Collapse')}
                             onClick={(event, val) => this.setState({ minimized: !minimized })}

diff --git a/src/web/widgets/Spindle/index.jsx b/src/web/widgets/Spindle/index.jsx
@@ -14,7 +14,7 @@ import styles from './index.styl';
 class SpindleWidget extends Component {
     static propTypes = {
         onDelete: PropTypes.func,
-        sortableHandleClassName: PropTypes.string
+        sortable: PropTypes.object
     };
     static defaultProps = {
         onDelete: () => {}
@@ -91,7 +91,6 @@ class SpindleWidget extends Component {
         });
     }
     render() {
-        const { sortableHandleClassName } = this.props;
         const { minimized, isFullscreen } = this.state;
         const state = {
             ...this.state,
@@ -103,9 +102,9 @@ class SpindleWidget extends Component {
 
         return (
             <Widget fullscreen={isFullscreen}>
-                <Widget.Header className={sortableHandleClassName}>
+                <Widget.Header className={this.props.sortable.handleClassName}>
                     <Widget.Title>{i18n._('Spindle')}</Widget.Title>
-                    <Widget.Controls>
+                    <Widget.Controls className={this.props.sortable.filterClassName}>
                         <Widget.Button
                             title={i18n._('Expand/Collapse')}
                             onClick={(event, val) => this.setState({ minimized: !minimized })}