Flip

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

@@ -21,8 +21,8 @@ import pasteIcon from './icons/paste.svg';
 import brushIcon from '../brush-mode/brush.svg';
 import curvedPointIcon from './icons/curved-point.svg';
 import eraserIcon from '../eraser-mode/eraser.svg';
-// import flipHorizontalIcon from './icons/flip-horizontal.svg';
-// import flipVerticalIcon from './icons/flip-vertical.svg';
+import flipHorizontalIcon from './icons/flip-horizontal.svg';
+import flipVerticalIcon from './icons/flip-vertical.svg';
 import straightPointIcon from './icons/straight-point.svg';
 
 import {MAX_STROKE_WIDTH} from '../../reducers/stroke-width';
@@ -59,6 +59,16 @@ const ModeToolsComponent = props => {
             defaultMessage: 'Pointed',
             description: 'Label for the button that converts selected points to sharp points',
             id: 'paint.modeTools.pointed'
+        },
+        flipHorizontal: {
+            defaultMessage: 'Flip Horizontal',
+            description: 'Label for the button to flip the image horizontally',
+            id: 'paint.modeTools.flipHorizontal'
+        },
+        flipVertical: {
+            defaultMessage: 'Flip Vertical',
+            description: 'Label for the button to flip the image vertically',
+            id: 'paint.modeTools.flipVertical'
         }
     });
 
@@ -135,18 +145,18 @@ const ModeToolsComponent = props => {
                         onClick={props.onPasteFromClipboard}
                     />
                 </InputGroup>
-                {/* <LabeledIconButton
-                    imgAlt="Flip Horizontal Icon"
+                <LabeledIconButton
+                    disabled={!props.selectedItems.length}
                     imgSrc={flipHorizontalIcon}
-                    title="Flip Horizontal"
-                    onClick={function () {}}
+                    title={props.intl.formatMessage(messages.flipHorizontal)}
+                    onClick={props.onFlipHorizontal}
                 />
                 <LabeledIconButton
-                    imgAlt="Flip Vertical Icon"
+                    disabled={!props.selectedItems.length}
                     imgSrc={flipVerticalIcon}
-                    title="Flip Vertical"
-                    onClick={function () {}}
-                /> */}
+                    title={props.intl.formatMessage(messages.flipVertical)}
+                    onClick={props.onFlipVertical}
+                />
             </div>
         );
     default:
@@ -170,6 +180,8 @@ ModeToolsComponent.propTypes = {
     onCopyToClipboard: PropTypes.func.isRequired,
     onCurvePoints: PropTypes.func.isRequired,
     onEraserSliderChange: PropTypes.func,
+    onFlipHorizontal: PropTypes.func.isRequired,
+    onFlipVertical: PropTypes.func.isRequired,
     onPasteFromClipboard: PropTypes.func.isRequired,
     onPointPoints: PropTypes.func.isRequired,
     selectedItems: PropTypes.arrayOf(PropTypes.instanceOf(paper.Item))

src/containers/mode-tools.jsx

@@ -20,6 +20,8 @@ class ModeTools extends React.Component {
             'hasSelectedUnpointedPoints',
             'handleCopyToClipboard',
             'handleCurvePoints',
+            'handleFlipHorizontal',
+            'handleFlipVertical',
             'handlePasteFromClipboard',
             'handlePointPoints'
         ]);
@@ -134,6 +136,33 @@ class ModeTools extends React.Component {
             this.props.onUpdateSvg();
         }
     }
+    _handleFlip (horizontalScale, verticalScale) {
+        const selectedItems = getSelectedRootItems();
+        // Record old indices
+        for (const item of selectedItems) {
+            item.data.index = item.index;
+        }
+
+        // Group items so that they flip as a unit
+        const itemGroup = new paper.Group(selectedItems);
+        // Flip
+        itemGroup.scale(horizontalScale, verticalScale);
+
+        // Remove flipped item from group and insert at old index. Must insert from bottom index up.
+        for (let i = 0; i < selectedItems.length; i++) {
+            itemGroup.layer.insertChild(selectedItems[i].data.index, selectedItems[i]);
+            selectedItems[i].data.index = null;
+        }
+        itemGroup.remove();
+
+        this.props.onUpdateSvg();
+    }
+    handleFlipHorizontal () {
+        this._handleFlip(-1, 1);
+    }
+    handleFlipVertical () {
+        this._handleFlip(1, -1);
+    }
     handleCopyToClipboard () {
         const selectedItems = getSelectedRootItems();
         if (selectedItems.length > 0) {
@@ -171,6 +200,8 @@ class ModeTools extends React.Component {
                 hasSelectedUnpointedPoints={this.hasSelectedUnpointedPoints()}
                 onCopyToClipboard={this.handleCopyToClipboard}
                 onCurvePoints={this.handleCurvePoints}
+                onFlipHorizontal={this.handleFlipHorizontal}
+                onFlipVertical={this.handleFlipVertical}
                 onPasteFromClipboard={this.handlePasteFromClipboard}
                 onPointPoints={this.handlePointPoints}
             />