Don't enable if there is nothing in the editor

src/components/mode-tools/mode-tools.jsx

@@ -151,11 +151,13 @@ const ModeToolsComponent = props => {
                 </InputGroup>
                 <InputGroup className={classNames(styles.modLabeledIconHeight)}>
                     <LabeledIconButton
+                        disabled={!props.hasItems}
                         imgSrc={flipHorizontalIcon}
                         title={props.intl.formatMessage(messages.flipHorizontal)}
                         onClick={props.onFlipHorizontal}
                     />
                     <LabeledIconButton
+                        disabled={!props.hasItems}
                         imgSrc={flipVerticalIcon}
                         title={props.intl.formatMessage(messages.flipVertical)}
                         onClick={props.onFlipVertical}
@@ -176,6 +178,7 @@ ModeToolsComponent.propTypes = {
     className: PropTypes.string,
     clipboardItems: PropTypes.arrayOf(PropTypes.array),
     eraserValue: PropTypes.number,
+    hasItems: PropTypes.bool,
     hasSelectedUncurvedPoints: PropTypes.bool,
     hasSelectedUnpointedPoints: PropTypes.bool,
     intl: intlShape.isRequired,

src/containers/mode-tools.jsx

@@ -7,7 +7,8 @@ import bindAll from 'lodash.bindall';
 import ModeToolsComponent from '../components/mode-tools/mode-tools.jsx';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
 import {incrementPasteOffset, setClipboardItems} from '../reducers/clipboard';
-import {clearSelection, getSelectedLeafItems, getSelectedRootItems, getAllRootItems} from '../helper/selection';
+import {clearSelection, getSelectedLeafItems, getSelectedRootItems} from '../helper/selection';
+import {getAllRootItems, getAllSelectableRootItems} from '../helper/selection';
 import {HANDLE_RATIO, ensureClockwise} from '../helper/math';
 
 class ModeTools extends React.Component {
@@ -16,6 +17,7 @@ class ModeTools extends React.Component {
         bindAll(this, [
             '_getSelectedUncurvedPoints',
             '_getSelectedUnpointedPoints',
+            'hasItems',
             'hasSelectedUncurvedPoints',
             'hasSelectedUnpointedPoints',
             'handleCopyToClipboard',
@@ -68,6 +70,9 @@ class ModeTools extends React.Component {
         const points = this._getSelectedUnpointedPoints();
         return points.length > 0;
     }
+    hasItems () {
+        return getAllSelectableRootItems().length > 0;
+    }
     handleCurvePoints () {
         let changed;
         const points = this._getSelectedUncurvedPoints();
@@ -203,6 +208,7 @@ class ModeTools extends React.Component {
     render () {
         return (
             <ModeToolsComponent
+                hasItems={this.hasItems()}
                 hasSelectedUncurvedPoints={this.hasSelectedUncurvedPoints()}
                 hasSelectedUnpointedPoints={this.hasSelectedUnpointedPoints()}
                 onCopyToClipboard={this.handleCopyToClipboard}

src/helper/selection.js

@@ -400,6 +400,7 @@ const shouldShowSelectAll = function () {
 export {
     getItems,
     getAllRootItems,
+    getAllSelectableRootItems,
     selectAllItems,
     selectAllSegments,
     clearSelection,