[Canvas] Feat: Keyboard shortcuts for nudging elements

x-pack/legacy/plugins/canvas/common/lib/constants.ts

@@ -25,3 +25,5 @@ export const DEFAULT_WORKPAD_CSS = '.canvasPage {\n\n}';
 export const DEFAULT_ELEMENT_CSS = '.canvasRenderEl{\n\n}';
 export const VALID_IMAGE_TYPES = ['gif', 'jpeg', 'png', 'svg+xml'];
 export const ASSET_MAX_SIZE = 25000;
+export const ELEMENT_SHIFT_OFFSET = 10;
+export const ELEMENT_NUDGE_OFFSET = 1;

x-pack/legacy/plugins/canvas/public/components/workpad_page/prop_types.js

@@ -49,4 +49,5 @@ export const interactiveWorkpadPagePropTypes = {
   canvasOrigin: PropTypes.func,
   saveCanvasOrigin: PropTypes.func.isRequired,
   commit: PropTypes.func.isRequired,
+  setMultiplePositions: PropTypes.func.isRequired,
 };

x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js

@@ -11,7 +11,12 @@ import { updater } from '../../../lib/aeroelastic/layout';
 import { getNodes, getPageById, isWriteable } from '../../../state/selectors/workpad';
 import { flatten } from '../../../lib/aeroelastic/functional';
 import { canUserWrite, getFullscreen } from '../../../state/selectors/app';
-import { elementLayer, insertNodes, removeElements } from '../../../state/actions/elements';
+import {
+  elementLayer,
+  insertNodes,
+  removeElements,
+  setMultiplePositions,
+} from '../../../state/actions/elements';
 import { selectToplevelNodes } from '../../../state/actions/transient';
 import { crawlTree, globalStateUpdater, shapesForNodes } from '../integration_utils';
 import { InteractiveWorkpadPage as InteractiveComponent } from './interactive_workpad_page';
@@ -117,10 +122,12 @@ const mapDispatchToProps = dispatch => ({
   removeNodes: (nodeIds, pageId) => dispatch(removeElements(nodeIds, pageId)),
   selectToplevelNodes: nodes =>
     dispatch(selectToplevelNodes(nodes.filter(e => !e.position.parent).map(e => e.id))),
-  // TODO: Abstract this out, this is similar to layering code in sidebar/index.js:
-  elementLayer: (pageId, elementId, movement) => {
-    dispatch(elementLayer({ pageId, elementId, movement }));
-  },
+  elementLayer: (pageId, elementId, movement) =>
+    dispatch(elementLayer({ pageId, elementId, movement })),
+  setMultiplePositions: pageId => repositionedNodes =>
+    dispatch(
+      setMultiplePositions(repositionedNodes.map(node => ({ ...node, pageId, elementId: node.id })))
+    ),
 });
 
 const mergeProps = (
@@ -132,6 +139,7 @@ const mergeProps = (
   ...restDispatchProps,
   ...restStateProps,
   updateGlobalState: globalStateUpdater(dispatch, state),
+  setMultiplePositions: restDispatchProps.setMultiplePositions(ownProps.pageId),
 });
 
 export const InteractivePage = compose(

x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js

@@ -47,6 +47,7 @@ export class InteractiveWorkpadPage extends PureComponent {
       canvasOrigin,
       saveCanvasOrigin,
       commit,
+      setMultiplePositions,
     } = this.props;
 
     let shortcuts = null;
@@ -59,6 +60,7 @@ export class InteractiveWorkpadPage extends PureComponent {
       selectedNodes,
       selectToplevelNodes,
       commit,
+      setMultiplePositions,
     };
     shortcuts = <WorkpadShortcuts {...shortcutProps} />;
 

x-pack/legacy/plugins/canvas/public/components/workpad_shortcuts/index.tsx

@@ -13,13 +13,15 @@ import {
   basicHandlerCreators,
   clipboardHandlerCreators,
   Props as HandlerCreatorProps,
+  positionHandlerCreators,
 } from '../../lib/element_handler_creators';
 
 export const WorkpadShortcuts = compose<WorkpadShortcutsProps, HandlerCreatorProps>(
   withHandlers(groupHandlerCreators),
   withHandlers(layerHandlerCreators),
   withHandlers(basicHandlerCreators),
-  withHandlers(clipboardHandlerCreators)
+  withHandlers(clipboardHandlerCreators),
+  withHandlers(positionHandlerCreators)
 )(Component);
 
 WorkpadShortcuts.propTypes = {

x-pack/legacy/plugins/canvas/public/components/workpad_shortcuts/workpad_shortcuts.tsx

@@ -56,6 +56,38 @@ export interface Props {
    * ungroups selected group
    */
   ungroupNodes: () => void;
+  /**
+   * shifts selected elements 10px up
+   */
+  shiftUp: () => void;
+  /**
+   * shifts selected elements 10px down
+   */
+  shiftDown: () => void;
+  /**
+   * shifts selected elements 10px left
+   */
+  shiftLeft: () => void;
+  /**
+   * shifts selected elements 10px right
+   */
+  shiftRight: () => void;
+  /**
+   * nudges selected elements 1px up
+   */
+  nudgeUp: () => void;
+  /**
+   * nudges selected elements 1px down
+   */
+  nudgeDown: () => void;
+  /**
+   * nudges selected elements 1px left
+   */
+  nudgeLeft: () => void;
+  /**
+   * nudges selected elements 1px right
+   */
+  nudgeRight: () => void;
 }
 
 export class WorkpadShortcuts extends Component<Props> {
@@ -71,6 +103,14 @@ export class WorkpadShortcuts extends Component<Props> {
     SEND_TO_BACK: this.props.sendToBack,
     GROUP: this.props.groupNodes,
     UNGROUP: this.props.ungroupNodes,
+    SHIFT_UP: this.props.shiftUp,
+    SHIFT_DOWN: this.props.shiftDown,
+    SHIFT_LEFT: this.props.shiftLeft,
+    SHIFT_RIGHT: this.props.shiftRight,
+    NUDGE_UP: this.props.nudgeUp,
+    NUDGE_DOWN: this.props.nudgeDown,
+    NUDGE_LEFT: this.props.nudgeLeft,
+    NUDGE_RIGHT: this.props.nudgeRight,
   };
 
   public render() {