Implement ordering buttons

src/components/paint-editor/paint-editor.jsx

@@ -117,35 +117,35 @@ class PaintEditorComponent extends React.Component {
                             />
                         </InputGroup>
 
-                        {/* To be Forward/Backward */}
+                        {/* Forward/Backward */}
                         <InputGroup className={styles.modDashedBorder}>
                             <EditFieldButton
                                 imgAlt="Send Forward Icon"
                                 imgSrc={sendForwardIcon}
                                 title="Forward"
-                                onClick={function () {}}
+                                onClick={this.props.onSendForward}
                             />
                             <EditFieldButton
                                 imgAlt="Send Backward Icon"
                                 imgSrc={sendBackwardIcon}
                                 title="Backward"
-                                onClick={function () {}}
+                                onClick={this.props.onSendBackward}
                             />
                         </InputGroup>
 
-                        {/* To be Front/back */}
+                        {/* Front/Back */}
                         <InputGroup>
                             <EditFieldButton
                                 imgAlt="Send to Front Icon"
                                 imgSrc={sendFrontIcon}
                                 title="Front"
-                                onClick={function () {}}
+                                onClick={this.props.onSendToFront}
                             />
                             <EditFieldButton
                                 imgAlt="Send to Back Icon"
                                 imgSrc={sendBackIcon}
                                 title="Back"
-                                onClick={function () {}}
+                                onClick={this.props.onSendToBack}
                             />
                         </InputGroup>
 
@@ -237,6 +237,10 @@ PaintEditorComponent.propTypes = {
     intl: intlShape,
     name: PropTypes.string,
     onRedo: PropTypes.func.isRequired,
+    onSendBackward: PropTypes.func.isRequired,
+    onSendForward: PropTypes.func.isRequired,
+    onSendToBack: PropTypes.func.isRequired,
+    onSendToFront: PropTypes.func.isRequired,
     onUndo: PropTypes.func.isRequired,
     onUpdateName: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired,

src/containers/paint-editor.jsx

@@ -7,6 +7,7 @@ import {undo, redo, undoSnapshot} from '../reducers/undo';
 
 import {getGuideLayer} from '../helper/layer';
 import {performUndo, performRedo, performSnapshot} from '../helper/undo';
+import {bringToFront, sendBackward, sendToBack, bringForward} from '../helper/order';
 
 import Modes from '../modes/modes';
 import {connect} from 'react-redux';
@@ -19,7 +20,11 @@ class PaintEditor extends React.Component {
         bindAll(this, [
             'handleUpdateSvg',
             'handleUndo',
-            'handleRedo'
+            'handleRedo',
+            'handleSendBackward',
+            'handleSendForward',
+            'handleSendToBack',
+            'handleSendToFront'
         ]);
     }
     componentDidMount () {
@@ -51,6 +56,18 @@ class PaintEditor extends React.Component {
     handleRedo () {
         performRedo(this.props.undoState, this.props.onRedo, this.handleUpdateSvg);
     }
+    handleSendBackward () {
+        sendBackward(this.handleUpdateSvg);
+    }
+    handleSendForward () {
+        bringForward(this.handleUpdateSvg);
+    }
+    handleSendToBack () {
+        sendToBack(this.handleUpdateSvg);
+    }
+    handleSendToFront () {
+        bringToFront(this.handleUpdateSvg);
+    }
     render () {
         return (
             <PaintEditorComponent
@@ -60,6 +77,10 @@ class PaintEditor extends React.Component {
                 svg={this.props.svg}
                 svgId={this.props.svgId}
                 onRedo={this.handleRedo}
+                onSendBackward={this.handleSendBackward}
+                onSendForward={this.handleSendForward}
+                onSendToBack={this.handleSendToBack}
+                onSendToFront={this.handleSendToFront}
                 onUndo={this.handleUndo}
                 onUpdateName={this.props.onUpdateName}
                 onUpdateSvg={this.handleUpdateSvg}

src/helper/order.js

@@ -0,0 +1,70 @@
+import {getSelectedRootItems} from './selection';
+
+const bringToFront = function (onUpdateSvg) {
+    const items = getSelectedRootItems();
+    for (const item of items) {
+        item.bringToFront();
+    }
+    onUpdateSvg();
+};
+
+const sendToBack = function (onUpdateSvg) {
+    const items = getSelectedRootItems();
+    for (let i = items.length - 1; i >= 0; i--) {
+        items[i].sendToBack();
+    }
+    onUpdateSvg();
+};
+
+const bringForward = function (onUpdateSvg) {
+    const items = getSelectedRootItems();
+    // Already at front
+    if (items.length === 0 || !items[items.length - 1].nextSibling) {
+        return;
+    }
+
+    const nextSibling = items[items.length - 1].nextSibling;
+    for (let i = items.length - 1; i >= 0; i--) {
+        items[i].insertAbove(nextSibling);
+    }
+    onUpdateSvg();
+};
+
+const sendBackward = function (onUpdateSvg) {
+    const items = getSelectedRootItems();
+    // Already at front
+    if (items.length === 0 || !items[0].previousSibling) {
+        return;
+    }
+
+    const previousSibling = items[0].previousSibling;
+    for (const item of items) {
+        item.insertBelow(previousSibling);
+    }
+    onUpdateSvg();
+};
+
+const shouldShowSendBackward = function () {
+    const items = getSelectedRootItems();
+    if (items.length === 0 || !items[0].previousSibling) {
+        return false;
+    }
+    return true;
+};
+
+const shouldShowBringForward = function () {
+    const items = getSelectedRootItems();
+    if (items.length === 0 || !items[items.length - 1].nextSibling) {
+        return false;
+    }
+    return true;
+};
+
+export {
+    bringToFront,
+    sendToBack,
+    bringForward,
+    sendBackward,
+    shouldShowBringForward,
+    shouldShowSendBackward
+};