From ad2df923a8db6dce45eef4ff727c64ebfc00adb6 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 12 Jun 2019 13:00:37 -0700
Subject: [PATCH 01/18] Added zoomScale to transient state

---
 x-pack/plugins/canvas/public/state/actions/transient.js  | 1 +
 x-pack/plugins/canvas/public/state/initial_state.js      | 1 +
 x-pack/plugins/canvas/public/state/reducers/transient.js | 7 +++++++
 x-pack/plugins/canvas/public/state/selectors/app.js      | 4 ++++
 4 files changed, 13 insertions(+)

diff --git a/x-pack/plugins/canvas/public/state/actions/transient.js b/x-pack/plugins/canvas/public/state/actions/transient.js
index a87c39b7ef6e0..6f4484638924c 100644
--- a/x-pack/plugins/canvas/public/state/actions/transient.js
+++ b/x-pack/plugins/canvas/public/state/actions/transient.js
@@ -10,3 +10,4 @@ export const setFullscreen = createAction('setFullscreen');
 export const selectToplevelNodes = createAction('selectToplevelNodes');
 export const setFirstLoad = createAction('setFirstLoad');
 export const setElementStats = createAction('setElementStats');
+export const setZoomScale = createAction('setZoomScale');
diff --git a/x-pack/plugins/canvas/public/state/initial_state.js b/x-pack/plugins/canvas/public/state/initial_state.js
index 2ba4cd1c37f36..ba4576a2140f9 100644
--- a/x-pack/plugins/canvas/public/state/initial_state.js
+++ b/x-pack/plugins/canvas/public/state/initial_state.js
@@ -14,6 +14,7 @@ export const getInitialState = path => {
     assets: {}, // assets end up here
     transient: {
       canUserWrite: capabilities.get().canvas.save,
+      zoomLevel: 1,
       elementStats: {
         total: 0,
         ready: 0,
diff --git a/x-pack/plugins/canvas/public/state/reducers/transient.js b/x-pack/plugins/canvas/public/state/reducers/transient.js
index 3924e08791e25..e059e6439d864 100644
--- a/x-pack/plugins/canvas/public/state/reducers/transient.js
+++ b/x-pack/plugins/canvas/public/state/reducers/transient.js
@@ -48,6 +48,13 @@ export const transientReducer = handleActions(
       };
     },
 
+    [transientActions.setZoomScale]: (transientState, { payload }) => {
+      return {
+        ...transientState,
+        zoomScale: payload || 1,
+      };
+    },
+
     [pageActions.setPage]: transientState => {
       return { ...transientState, selectedToplevelNodes: [] };
     },
diff --git a/x-pack/plugins/canvas/public/state/selectors/app.js b/x-pack/plugins/canvas/public/state/selectors/app.js
index 0f13df85a0353..4df40300c2968 100644
--- a/x-pack/plugins/canvas/public/state/selectors/app.js
+++ b/x-pack/plugins/canvas/public/state/selectors/app.js
@@ -15,6 +15,10 @@ export function getFullscreen(state) {
   return get(state, 'transient.fullscreen', false);
 }
 
+export function getZoomScale(state) {
+  return get(state, 'transient.zoomScale', 1);
+}
+
 export function getServerFunctions(state) {
   return get(state, 'app.serverFunctions');
 }

From 3d65fa8743e97243a20771690f9fde2aa95beec6 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 12 Jun 2019 13:05:15 -0700
Subject: [PATCH 02/18] Added scaling to workpad

---
 x-pack/plugins/canvas/common/lib/constants.ts |  1 +
 .../canvas/public/components/workpad/index.js |  3 +-
 .../public/components/workpad/workpad.js      | 10 +++++-
 .../public/components/workpad_header/index.js | 30 +++++++++++++-----
 .../workpad_header/workpad_header.js          | 31 ++++++++++++++++++-
 .../event_handlers.js                         | 27 ++++++++--------
 .../workpad_interactive_page/index.js         |  3 +-
 7 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/canvas/common/lib/constants.ts b/x-pack/plugins/canvas/common/lib/constants.ts
index 3f5efd70bd4d6..d452e9f1b9bee 100644
--- a/x-pack/plugins/canvas/common/lib/constants.ts
+++ b/x-pack/plugins/canvas/common/lib/constants.ts
@@ -25,3 +25,4 @@ 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 ZOOM_LEVELS = [0.5, 0.75, 0.9, 1, 1.5, 2, 3, 4];
diff --git a/x-pack/plugins/canvas/public/components/workpad/index.js b/x-pack/plugins/canvas/public/components/workpad/index.js
index c030cb1cabcbc..12bc59bbc5144 100644
--- a/x-pack/plugins/canvas/public/components/workpad/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad/index.js
@@ -10,7 +10,7 @@ import { pure, compose, withState, withProps, getContext, withHandlers } from 'r
 import { transitionsRegistry } from '../../lib/transitions_registry';
 import { undoHistory, redoHistory } from '../../state/actions/history';
 import { fetchAllRenderables } from '../../state/actions/elements';
-import { getFullscreen } from '../../state/selectors/app';
+import { getFullscreen, getZoomScale } from '../../state/selectors/app';
 import {
   getSelectedPageIndex,
   getAllElements,
@@ -30,6 +30,7 @@ const mapStateToProps = state => {
     workpadCss,
     workpadId,
     isFullscreen: getFullscreen(state),
+    zoomScale: getZoomScale(state),
   };
 };
 
diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js
index 44f7cbea8716d..94c411891edfc 100644
--- a/x-pack/plugins/canvas/public/components/workpad/workpad.js
+++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js
@@ -86,6 +86,7 @@ export class Workpad extends React.PureComponent {
       isFullscreen,
       registerLayout,
       unregisterLayout,
+      zoomScale,
     } = this.props;
 
     const bufferStyle = {
@@ -95,7 +96,14 @@ export class Workpad extends React.PureComponent {
 
     return (
       <div className="canvasWorkpad__buffer" style={bufferStyle}>
-        <div className="canvasCheckered" style={{ height, width }}>
+        <div
+          className="canvasCheckered"
+          style={{
+            height,
+            width,
+            transform: isFullscreen ? undefined : `scale3d(${zoomScale}, ${zoomScale}, 1)`, // don't scale in fullscreen mode
+          }}
+        >
           {!isFullscreen && (
             <Shortcuts name="EDITOR" handler={this.keyHandler} targetNodeSelector="body" global />
           )}
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/index.js b/x-pack/plugins/canvas/public/components/workpad_header/index.js
index b3de256155d56..e1e57791a4aed 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/index.js
@@ -6,27 +6,43 @@
 
 import { compose } from 'recompose';
 import { connect } from 'react-redux';
-import { canUserWrite } from '../../state/selectors/app';
+import { canUserWrite, getZoomScale } from '../../state/selectors/app';
 import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
 import { setWriteable } from '../../state/actions/workpad';
+import { setZoomScale } from '../../state/actions/transient';
+import { ZOOM_LEVELS } from '../../../common/lib/constants';
 import { WorkpadHeader as Component } from './workpad_header';
 
 const mapStateToProps = state => ({
   isWriteable: isWriteable(state) && canUserWrite(state),
   canUserWrite: canUserWrite(state),
   selectedPage: getSelectedPage(state),
+  zoomScale: getZoomScale(state),
 });
 
 const mapDispatchToProps = dispatch => ({
   setWriteable: isWriteable => dispatch(setWriteable(isWriteable)),
+  setZoomScale: scale => dispatch(setZoomScale(scale)),
 });
 
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
-});
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { setWriteable, setZoomScale, ...remainingDispatchProps } = dispatchProps;
+  const scaleIndex = ZOOM_LEVELS.indexOf(stateProps.zoomScale);
+  const scaleUp =
+    scaleIndex + 1 < ZOOM_LEVELS.length
+      ? ZOOM_LEVELS[scaleIndex + 1]
+      : ZOOM_LEVELS[scaleIndex.length - 1];
+  const scaleDown = scaleIndex - 1 >= 0 ? ZOOM_LEVELS[scaleIndex - 1] : ZOOM_LEVELS[0];
+  console.log({ scaleIndex, scaleDown, scaleUp });
+  return {
+    ...stateProps,
+    ...remainingDispatchProps,
+    ...ownProps,
+    toggleWriteable: () => setWriteable(!stateProps.isWriteable),
+    decreaseZoom: () => setZoomScale(scaleDown),
+    increaseZoom: () => setZoomScale(scaleUp),
+  };
+};
 
 export const WorkpadHeader = compose(
   connect(
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
index 3988e614347d3..b7c5920b350f6 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
@@ -20,11 +20,15 @@ import {
 import { AssetManager } from '../asset_manager';
 import { ElementTypes } from '../element_types';
 import { ToolTipShortcut } from '../tool_tip_shortcut/';
+import { ZOOM_LEVELS } from '../../../common/lib/constants';
 import { ControlSettings } from './control_settings';
 import { RefreshControl } from './refresh_control';
 import { FullscreenControl } from './fullscreen_control';
 import { WorkpadExport } from './workpad_export';
 
+const MIN_ZOOM_LEVEL = ZOOM_LEVELS[0];
+const MAX_ZOOM_LEVEL = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
+
 export class WorkpadHeader extends React.PureComponent {
   static propTypes = {
     isWriteable: PropTypes.bool,
@@ -91,7 +95,14 @@ export class WorkpadHeader extends React.PureComponent {
   };
 
   render() {
-    const { isWriteable, canUserWrite, toggleWriteable } = this.props;
+    const {
+      isWriteable,
+      canUserWrite,
+      toggleWriteable,
+      zoomScale,
+      decreaseZoom,
+      increaseZoom,
+    } = this.props;
     const { isModalVisible } = this.state;
 
     return (
@@ -131,6 +142,24 @@ export class WorkpadHeader extends React.PureComponent {
                   />
                 </EuiToolTip>
               </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiToolTip position="bottom" content="Decrease zoom">
+                  <EuiButtonIcon
+                    iconType="starMinusFilled"
+                    onClick={decreaseZoom}
+                    disabled={zoomScale === MIN_ZOOM_LEVEL}
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiToolTip position="bottom" content="Increase zoom">
+                  <EuiButtonIcon
+                    iconType="starPlusFilled"
+                    onClick={increaseZoom}
+                    disabled={zoomScale === MAX_ZOOM_LEVEL}
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
           {isWriteable ? (
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
index 05214f59d3931..f6e13c2f0f10d 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-const localMousePosition = (canvasOrigin, clientX, clientY) => {
+const localMousePosition = (canvasOrigin, clientX, clientY, zoomScale = 1) => {
   const { left, top } = canvasOrigin();
   return {
-    x: clientX - left,
-    y: clientY - top,
+    x: clientX * (1 / zoomScale) - left,
+    y: clientY * (1 / zoomScale) - top,
   };
 };
 
@@ -17,12 +17,12 @@ const resetHandler = () => {
   window.onmouseup = null;
 };
 
-const setupHandler = (commit, canvasOrigin) => {
+const setupHandler = (commit, canvasOrigin, zoomScale) => {
   // Ancestor has to be identified on setup, rather than 1st interaction, otherwise events may be triggered on
   // DOM elements that had been removed: kibana-canvas github issue #1093
 
   window.onmousemove = ({ buttons, clientX, clientY, altKey, metaKey, shiftKey, ctrlKey }) => {
-    const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
+    const { x, y } = localMousePosition(canvasOrigin, clientX, clientY, zoomScale);
     // only commits the cursor position if there's a way to latch onto x/y calculation (canvasOrigin is knowable)
     // or if left button is being held down (i.e. an element is being dragged)
     if (buttons === 1 || canvasOrigin) {
@@ -35,7 +35,7 @@ const setupHandler = (commit, canvasOrigin) => {
   window.onmouseup = e => {
     e.stopPropagation();
     const { clientX, clientY, altKey, metaKey, shiftKey, ctrlKey } = e;
-    const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
+    const { x, y } = localMousePosition(canvasOrigin, clientX, clientY, zoomScale);
     commit('mouseEvent', { event: 'mouseUp', x, y, altKey, metaKey, shiftKey, ctrlKey });
     resetHandler();
   };
@@ -44,9 +44,10 @@ const setupHandler = (commit, canvasOrigin) => {
 const handleMouseMove = (
   commit,
   { clientX, clientY, altKey, metaKey, shiftKey, ctrlKey },
-  canvasOrigin
+  canvasOrigin,
+  zoomScale
 ) => {
-  const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
+  const { x, y } = localMousePosition(canvasOrigin, clientX, clientY, zoomScale);
   if (commit) {
     commit('cursorPosition', { x, y, altKey, metaKey, shiftKey, ctrlKey });
   }
@@ -58,21 +59,21 @@ const handleMouseLeave = (commit, { buttons }) => {
   }
 };
 
-const handleMouseDown = (commit, e, canvasOrigin) => {
+const handleMouseDown = (commit, e, canvasOrigin, zoomScale) => {
   e.stopPropagation();
   const { clientX, clientY, buttons, altKey, metaKey, shiftKey, ctrlKey } = e;
   if (buttons !== 1 || !commit) {
     resetHandler();
     return; // left-click only
   }
-  setupHandler(commit, canvasOrigin);
-  const { x, y } = localMousePosition(canvasOrigin, clientX, clientY);
+  setupHandler(commit, canvasOrigin, zoomScale);
+  const { x, y } = localMousePosition(canvasOrigin, clientX, clientY, zoomScale);
   commit('mouseEvent', { event: 'mouseDown', x, y, altKey, metaKey, shiftKey, ctrlKey });
 };
 
 export const eventHandlers = {
-  onMouseDown: props => e => handleMouseDown(props.commit, e, props.canvasOrigin),
-  onMouseMove: props => e => handleMouseMove(props.commit, e, props.canvasOrigin),
+  onMouseDown: props => e => handleMouseDown(props.commit, e, props.canvasOrigin, props.zoomScale),
+  onMouseMove: props => e => handleMouseMove(props.commit, e, props.canvasOrigin, props.zoomScale),
   onMouseLeave: props => e => handleMouseLeave(props.commit, e),
   onWheel: props => e => handleMouseMove(props.commit, e, props.canvasOrigin),
   resetHandler: () => () => resetHandler(),
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js
index 9bea3e29cdbed..088a6b21bc167 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js
@@ -10,7 +10,7 @@ import { createStore } from '../../../lib/aeroelastic/store';
 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 { canUserWrite, getFullscreen, getZoomScale } from '../../../state/selectors/app';
 import { elementLayer, insertNodes, removeElements } from '../../../state/actions/elements';
 import { selectToplevelNodes } from '../../../state/actions/transient';
 import { crawlTree, globalStateUpdater, shapesForNodes } from '../integration_utils';
@@ -108,6 +108,7 @@ const mapStateToProps = (state, ownProps) => {
     selectedToplevelNodes,
     selectedNodes: selectedNodeIds.map(id => nodes.find(s => s.id === id)),
     pageStyle: getPageById(state, ownProps.pageId).style,
+    zoomScale: getZoomScale(state),
   };
 };
 

From 5b8ff05c756ab30e161af73ea38b805164a834df Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 12 Jun 2019 13:09:40 -0700
Subject: [PATCH 03/18] Fixed transform origin

---
 x-pack/plugins/canvas/public/components/workpad/workpad.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js
index 94c411891edfc..0081b9c88117a 100644
--- a/x-pack/plugins/canvas/public/components/workpad/workpad.js
+++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js
@@ -101,6 +101,7 @@ export class Workpad extends React.PureComponent {
           style={{
             height,
             width,
+            transformOrigin: '0 0',
             transform: isFullscreen ? undefined : `scale3d(${zoomScale}, ${zoomScale}, 1)`, // don't scale in fullscreen mode
           }}
         >

From 224de563d8d3374664c06b5fa03213765e3cd738 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 12 Jun 2019 13:11:56 -0700
Subject: [PATCH 04/18] Fixed mouse coordinate calculation

---
 .../workpad_page/workpad_interactive_page/event_handlers.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
index f6e13c2f0f10d..b15bc0e2474f6 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
@@ -7,8 +7,8 @@
 const localMousePosition = (canvasOrigin, clientX, clientY, zoomScale = 1) => {
   const { left, top } = canvasOrigin();
   return {
-    x: clientX * (1 / zoomScale) - left,
-    y: clientY * (1 / zoomScale) - top,
+    x: (clientX - left) * (1 / zoomScale),
+    y: (clientY - top) * (1 / zoomScale),
   };
 };
 

From f9f20c1fc92afe91bb714d3fd0389df9f2e2d5f1 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 12 Jun 2019 15:59:30 -0700
Subject: [PATCH 05/18] Unscaled BorderResizeHandle and RotationHandle

---
 .../border_resize_handle/border_resize_handle.js      |  6 ++++--
 .../components/rotation_handle/rotation_handle.js     | 11 ++++++++---
 .../components/rotation_handle/rotation_handle.scss   |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js b/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js
index 704f5934345e7..de9d573724836 100644
--- a/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js
+++ b/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js
@@ -8,10 +8,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { matrixToCSS } from '../../lib/dom';
 
-export const BorderResizeHandle = ({ transformMatrix }) => (
+export const BorderResizeHandle = ({ transformMatrix, zoomScale }) => (
   <div
     className="canvasBorderResizeHandle canvasLayoutAnnotation"
-    style={{ transform: matrixToCSS(transformMatrix) }}
+    style={{
+      transform: `${matrixToCSS(transformMatrix)} scale3d(${1 / zoomScale},${1 / zoomScale}, 1)`,
+    }}
   />
 );
 
diff --git a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.js b/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.js
index 335f2e719857f..dfadbbc39c547 100644
--- a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.js
+++ b/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.js
@@ -8,12 +8,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { matrixToCSS } from '../../lib/dom';
 
-export const RotationHandle = ({ transformMatrix }) => (
+export const RotationHandle = ({ transformMatrix, zoomScale }) => (
   <div
     className="canvasRotationHandle canvasRotationHandle--connector canvasLayoutAnnotation"
-    style={{ transform: matrixToCSS(transformMatrix) }}
+    style={{
+      transform: matrixToCSS(transformMatrix),
+    }}
   >
-    <div className="canvasRotationHandle--handle" />
+    <div
+      className="canvasRotationHandle--handle"
+      style={{ transform: `scale3d(${1 / zoomScale},${1 / zoomScale},1)` }}
+    />
   </div>
 );
 
diff --git a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.scss b/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.scss
index 820107ff47a51..233a86199c483 100644
--- a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.scss
+++ b/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.scss
@@ -19,7 +19,7 @@
   height: 9px;
   width: 9px;
   margin-left: -5px;
-  margin-top: -3px;
+  margin-top: -6px;
   border-radius: 50%;
   background-color: $euiColorMediumShade;
 }

From 6848420a71966a515321f2fc1c38c5e24b6ddea4 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Thu, 13 Jun 2019 12:35:12 -0700
Subject: [PATCH 06/18] Added keyboard shortcuts

---
 x-pack/plugins/canvas/common/lib/constants.ts |  2 +
 .../canvas/public/components/workpad/index.js |  6 ++-
 .../public/components/workpad/workpad.js      | 46 +++++++++----------
 .../public/components/workpad_header/index.js | 31 ++++---------
 .../workpad_header/workpad_header.js          | 24 ++++------
 .../interactive_workpad_page.js               |  2 +
 .../canvas/public/lib/app_handler_creators.ts | 32 +++++++++++++
 .../canvas/public/lib/get_pretty_shortcut.ts  |  2 +
 x-pack/plugins/canvas/public/lib/keymap.ts    |  4 +-
 9 files changed, 87 insertions(+), 62 deletions(-)
 create mode 100644 x-pack/plugins/canvas/public/lib/app_handler_creators.ts

diff --git a/x-pack/plugins/canvas/common/lib/constants.ts b/x-pack/plugins/canvas/common/lib/constants.ts
index d452e9f1b9bee..c2517db3d095c 100644
--- a/x-pack/plugins/canvas/common/lib/constants.ts
+++ b/x-pack/plugins/canvas/common/lib/constants.ts
@@ -26,3 +26,5 @@ 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 ZOOM_LEVELS = [0.5, 0.75, 0.9, 1, 1.5, 2, 3, 4];
+export const MIN_ZOOM_LEVEL = ZOOM_LEVELS[0];
+export const MAX_ZOOM_LEVEL = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
diff --git a/x-pack/plugins/canvas/public/components/workpad/index.js b/x-pack/plugins/canvas/public/components/workpad/index.js
index 12bc59bbc5144..0ddc24f448681 100644
--- a/x-pack/plugins/canvas/public/components/workpad/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad/index.js
@@ -10,6 +10,7 @@ import { pure, compose, withState, withProps, getContext, withHandlers } from 'r
 import { transitionsRegistry } from '../../lib/transitions_registry';
 import { undoHistory, redoHistory } from '../../state/actions/history';
 import { fetchAllRenderables } from '../../state/actions/elements';
+import { setZoomScale } from '../../state/actions/transient';
 import { getFullscreen, getZoomScale } from '../../state/selectors/app';
 import {
   getSelectedPageIndex,
@@ -17,6 +18,7 @@ import {
   getWorkpad,
   getPages,
 } from '../../state/selectors/workpad';
+import { zoomHandlerCreators } from '../../lib/app_handler_creators';
 import { Workpad as Component } from './workpad';
 
 const mapStateToProps = state => {
@@ -38,6 +40,7 @@ const mapDispatchToProps = {
   undoHistory,
   redoHistory,
   fetchAllRenderables,
+  setZoomScale,
 };
 
 export const Workpad = compose(
@@ -93,5 +96,6 @@ export const Workpad = compose(
       const pageNumber = Math.max(1, props.selectedPageNumber - 1);
       props.onPageChange(pageNumber);
     },
-  })
+  }),
+  withHandlers(zoomHandlerCreators)
 )(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js
index 0081b9c88117a..0d7379baba552 100644
--- a/x-pack/plugins/canvas/public/components/workpad/workpad.js
+++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js
@@ -44,31 +44,31 @@ export class Workpad extends React.PureComponent {
       previousPage,
       grid, // TODO: Get rid of grid when we improve the layout engine
       setGrid,
+      zoomIn,
+      zoomOut,
     } = this.props;
 
     // handle keypress events for editor and presentation events
     // this exists in both contexts
-    if (action === 'REFRESH') {
-      return fetchAllRenderables();
-    }
-
-    // editor events
-    if (action === 'UNDO') {
-      return undoHistory();
-    }
-    if (action === 'REDO') {
-      return redoHistory();
-    }
-    if (action === 'GRID') {
-      return setGrid(!grid);
-    }
-
-    // presentation events
-    if (action === 'PREV') {
-      return previousPage();
-    }
-    if (action === 'NEXT') {
-      return nextPage();
+    switch (action) {
+      case 'REFRESH':
+        return fetchAllRenderables();
+      case 'ZOOM_IN':
+        return zoomIn();
+      case 'ZOOM_OUT':
+        return zoomOut();
+      // editor events
+      case 'UNDO':
+        return undoHistory();
+      case 'REDO':
+        return redoHistory();
+      case 'GRID':
+        return setGrid(!grid);
+      // presentation events
+      case 'PREV':
+        return previousPage();
+      case 'NEXT':
+        return nextPage();
     }
   };
 
@@ -90,8 +90,8 @@ export class Workpad extends React.PureComponent {
     } = this.props;
 
     const bufferStyle = {
-      height: isFullscreen ? height : height + WORKPAD_CANVAS_BUFFER,
-      width: isFullscreen ? width : width + WORKPAD_CANVAS_BUFFER,
+      height: isFullscreen ? height : (height + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale,
+      width: isFullscreen ? width : (width + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale,
     };
 
     return (
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/index.js b/x-pack/plugins/canvas/public/components/workpad_header/index.js
index e1e57791a4aed..e4779fa7c68e2 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/index.js
@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { compose } from 'recompose';
+import { compose, withHandlers } from 'recompose';
 import { connect } from 'react-redux';
 import { canUserWrite, getZoomScale } from '../../state/selectors/app';
 import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
 import { setWriteable } from '../../state/actions/workpad';
 import { setZoomScale } from '../../state/actions/transient';
-import { ZOOM_LEVELS } from '../../../common/lib/constants';
+import { zoomHandlerCreators } from '../../lib/app_handler_creators';
 import { WorkpadHeader as Component } from './workpad_header';
 
 const mapStateToProps = state => ({
@@ -25,29 +25,18 @@ const mapDispatchToProps = dispatch => ({
   setZoomScale: scale => dispatch(setZoomScale(scale)),
 });
 
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { setWriteable, setZoomScale, ...remainingDispatchProps } = dispatchProps;
-  const scaleIndex = ZOOM_LEVELS.indexOf(stateProps.zoomScale);
-  const scaleUp =
-    scaleIndex + 1 < ZOOM_LEVELS.length
-      ? ZOOM_LEVELS[scaleIndex + 1]
-      : ZOOM_LEVELS[scaleIndex.length - 1];
-  const scaleDown = scaleIndex - 1 >= 0 ? ZOOM_LEVELS[scaleIndex - 1] : ZOOM_LEVELS[0];
-  console.log({ scaleIndex, scaleDown, scaleUp });
-  return {
-    ...stateProps,
-    ...remainingDispatchProps,
-    ...ownProps,
-    toggleWriteable: () => setWriteable(!stateProps.isWriteable),
-    decreaseZoom: () => setZoomScale(scaleDown),
-    increaseZoom: () => setZoomScale(scaleUp),
-  };
-};
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...stateProps,
+  ...dispatchProps,
+  ...ownProps,
+  toggleWriteable: () => setWriteable(!stateProps.isWriteable),
+});
 
 export const WorkpadHeader = compose(
   connect(
     mapStateToProps,
     mapDispatchToProps,
     mergeProps
-  )
+  ),
+  withHandlers(zoomHandlerCreators)
 )(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
index b7c5920b350f6..8b7ef6ef88d03 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
@@ -20,15 +20,12 @@ import {
 import { AssetManager } from '../asset_manager';
 import { ElementTypes } from '../element_types';
 import { ToolTipShortcut } from '../tool_tip_shortcut/';
-import { ZOOM_LEVELS } from '../../../common/lib/constants';
+import { MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL } from '../../../common/lib/constants';
 import { ControlSettings } from './control_settings';
 import { RefreshControl } from './refresh_control';
 import { FullscreenControl } from './fullscreen_control';
 import { WorkpadExport } from './workpad_export';
 
-const MIN_ZOOM_LEVEL = ZOOM_LEVELS[0];
-const MAX_ZOOM_LEVEL = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
-
 export class WorkpadHeader extends React.PureComponent {
   static propTypes = {
     isWriteable: PropTypes.bool,
@@ -95,14 +92,7 @@ export class WorkpadHeader extends React.PureComponent {
   };
 
   render() {
-    const {
-      isWriteable,
-      canUserWrite,
-      toggleWriteable,
-      zoomScale,
-      decreaseZoom,
-      increaseZoom,
-    } = this.props;
+    const { isWriteable, canUserWrite, toggleWriteable, zoomScale, zoomIn, zoomOut } = this.props;
     const { isModalVisible } = this.state;
 
     return (
@@ -143,20 +133,22 @@ export class WorkpadHeader extends React.PureComponent {
                 </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiToolTip position="bottom" content="Decrease zoom">
+                <EuiToolTip position="bottom" content="Zoom out">
                   <EuiButtonIcon
                     iconType="starMinusFilled"
-                    onClick={decreaseZoom}
+                    onClick={zoomOut}
                     disabled={zoomScale === MIN_ZOOM_LEVEL}
+                    aria-label="Zoom out"
                   />
                 </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiToolTip position="bottom" content="Increase zoom">
+                <EuiToolTip position="bottom" content="Zoom in">
                   <EuiButtonIcon
                     iconType="starPlusFilled"
-                    onClick={increaseZoom}
+                    onClick={zoomIn}
                     disabled={zoomScale === MAX_ZOOM_LEVEL}
+                    aria-label="Zoom in"
                   />
                 </EuiToolTip>
               </EuiFlexItem>
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js
index 881503132d233..f4e9b91226b8f 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js
+++ b/x-pack/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,
+      zoomScale,
     } = this.props;
 
     let shortcuts = null;
@@ -95,6 +96,7 @@ export class InteractiveWorkpadPage extends PureComponent {
                 width: node.width,
                 height: node.height,
                 text: node.text,
+                zoomScale,
               };
 
               switch (node.subtype) {
diff --git a/x-pack/plugins/canvas/public/lib/app_handler_creators.ts b/x-pack/plugins/canvas/public/lib/app_handler_creators.ts
new file mode 100644
index 0000000000000..f0a73046e6d35
--- /dev/null
+++ b/x-pack/plugins/canvas/public/lib/app_handler_creators.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { ZOOM_LEVELS, MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from '../../common/lib/constants';
+
+export interface Props {
+  /**
+   * current zoom level of the workpad
+   */
+  zoomScale: number;
+  /**
+   * sets the new zoom level
+   */
+  setZoomScale: (scale: number) => void;
+}
+
+// handlers for zooming in and out
+export const zoomHandlerCreators = {
+  zoomIn: ({ zoomScale, setZoomScale }: Props) => (): void => {
+    const scaleIndex = ZOOM_LEVELS.indexOf(zoomScale);
+    const scaleUp =
+      scaleIndex + 1 < ZOOM_LEVELS.length ? ZOOM_LEVELS[scaleIndex + 1] : MAX_ZOOM_LEVEL;
+    setZoomScale(scaleUp);
+  },
+  zoomOut: ({ zoomScale, setZoomScale }: Props) => (): void => {
+    const scaleIndex = ZOOM_LEVELS.indexOf(zoomScale);
+    const scaleDown = scaleIndex - 1 >= 0 ? ZOOM_LEVELS[scaleIndex - 1] : MIN_ZOOM_LEVEL;
+    setZoomScale(scaleDown);
+  },
+};
diff --git a/x-pack/plugins/canvas/public/lib/get_pretty_shortcut.ts b/x-pack/plugins/canvas/public/lib/get_pretty_shortcut.ts
index 46165f5c35dc4..30f36f7696d0c 100644
--- a/x-pack/plugins/canvas/public/lib/get_pretty_shortcut.ts
+++ b/x-pack/plugins/canvas/public/lib/get_pretty_shortcut.ts
@@ -16,6 +16,8 @@ export const getPrettyShortcut = (shortcut: string): string => {
   result = result.replace(/right/i, '→');
   result = result.replace(/up/i, '↑');
   result = result.replace(/down/i, '↓');
+  result = result.replace(/plus/i, '+');
+  result = result.replace(/minus/i, '-');
 
   return result;
 };
diff --git a/x-pack/plugins/canvas/public/lib/keymap.ts b/x-pack/plugins/canvas/public/lib/keymap.ts
index 8d1127e9e9e58..8173628fb3f3f 100644
--- a/x-pack/plugins/canvas/public/lib/keymap.ts
+++ b/x-pack/plugins/canvas/public/lib/keymap.ts
@@ -39,7 +39,7 @@ const getShortcuts = (
     modifiers = [modifiers];
   }
 
-  let macShortcuts = shortcuts;
+  let macShortcuts = [...shortcuts];
 
   // handle shift modifier
   if (modifiers.includes('shift')) {
@@ -117,6 +117,8 @@ export const keymap: KeyMap = {
     EDITING: getShortcuts('e', { modifiers: 'alt', help: 'Toggle edit mode' }),
     GRID: getShortcuts('g', { modifiers: 'alt', help: 'Show grid' }),
     REFRESH: refreshShortcut,
+    ZOOM_IN: getShortcuts('plus', { modifiers: ['ctrl', 'alt'], help: 'Zoom in' }),
+    ZOOM_OUT: getShortcuts('minus', { modifiers: ['ctrl', 'alt'], help: 'Zoom out' }),
   },
   PRESENTATION: {
     displayName: 'Presentation controls',

From 1494a86c9ad825db00fa8480b2b9627cd739f367 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Thu, 13 Jun 2019 12:55:39 -0700
Subject: [PATCH 07/18] Fixed keyboard shortcuts reference

---
 .../keyboard_shortcuts_doc.tsx                   |  6 ++++--
 .../lib/__tests__/get_pretty_shortcut.test.ts    | 16 ++++++++++++++++
 x-pack/plugins/canvas/public/lib/keymap.ts       |  6 +++---
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
index b637310d25162..e7da81e7855a1 100644
--- a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
+++ b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
@@ -42,14 +42,16 @@ const getDescriptionListItems = (shortcuts: ShortcutMap[]): DescriptionListItem[
       return {
         title: shortcutKeyMap.help,
         description: osShortcuts.reduce((acc: JSX.Element[], shortcut, i): JSX.Element[] => {
+          // replace +'s with spaces so we can display the plus symbol for the plus key
+          shortcut = shortcut.replace(/\+/g, ' ');
           if (i !== 0) {
             acc.push(<span key={getId('span')}> or </span>);
           }
           acc.push(
             <span key={getId('span')}>
               {getPrettyShortcut(shortcut)
-                .split(/(\+)/g) // splits the array by '+' and keeps the '+'s as elements in the array
-                .map(key => (key === '+' ? ` ` : <EuiCode key={getId('shortcut')}>{key}</EuiCode>))}
+                .split(/( )/g)
+                .map(key => (key === ' ' ? key : <EuiCode key={getId('shortcut')}>{key}</EuiCode>))}
             </span>
           );
           return acc;
diff --git a/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts b/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
index 56384d9a937b8..93d1b02b22fb2 100644
--- a/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
+++ b/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
@@ -59,4 +59,20 @@ describe('getPrettyShortcut', () => {
     expect(getPrettyShortcut('command+shift+down')).toBe('⌘+SHIFT+↓');
     expect(getPrettyShortcut('command+option+shift+down')).toBe('⌘+⌥+SHIFT+↓');
   });
+  test(`replaces 'plus' with +`, () => {
+    expect(getPrettyShortcut('plus')).toBe('+');
+    expect(getPrettyShortcut('command+plus')).toBe('⌘++');
+    expect(getPrettyShortcut('option+plus')).toBe('⌥++');
+    expect(getPrettyShortcut('option+shift+plus')).toBe('⌥+SHIFT++');
+    expect(getPrettyShortcut('command+shift+plus')).toBe('⌘+SHIFT++');
+    expect(getPrettyShortcut('command+option+shift+plus')).toBe('⌘+⌥+SHIFT++');
+  });
+  test(`replaces 'minus' with -`, () => {
+    expect(getPrettyShortcut('minus')).toBe('-');
+    expect(getPrettyShortcut('command+minus')).toBe('⌘+-');
+    expect(getPrettyShortcut('option+minus')).toBe('⌥+-');
+    expect(getPrettyShortcut('option+shift+minus')).toBe('⌥+SHIFT+-');
+    expect(getPrettyShortcut('command+shift+minus')).toBe('⌘+SHIFT+-');
+    expect(getPrettyShortcut('command+option+shift+minus')).toBe('⌘+⌥+SHIFT+-');
+  });
 });
diff --git a/x-pack/plugins/canvas/public/lib/keymap.ts b/x-pack/plugins/canvas/public/lib/keymap.ts
index 8173628fb3f3f..18478576a6700 100644
--- a/x-pack/plugins/canvas/public/lib/keymap.ts
+++ b/x-pack/plugins/canvas/public/lib/keymap.ts
@@ -43,19 +43,19 @@ const getShortcuts = (
 
   // handle shift modifier
   if (modifiers.includes('shift')) {
-    macShortcuts = shortcuts.map(shortcut => `shift+${shortcut}`);
+    macShortcuts = macShortcuts.map(shortcut => `shift+${shortcut}`);
     shortcuts = shortcuts.map(shortcut => `shift+${shortcut}`);
   }
 
   // handle alt modifier
   if (modifiers.includes('alt') || modifiers.includes('option')) {
-    macShortcuts = shortcuts.map(shortcut => `option+${shortcut}`);
+    macShortcuts = macShortcuts.map(shortcut => `option+${shortcut}`);
     shortcuts = shortcuts.map(shortcut => `alt+${shortcut}`);
   }
 
   // handle ctrl modifier
   if (modifiers.includes('ctrl') || modifiers.includes('command')) {
-    macShortcuts = shortcuts.map(shortcut => `command+${shortcut}`);
+    macShortcuts = macShortcuts.map(shortcut => `command+${shortcut}`);
     shortcuts = shortcuts.map(shortcut => `ctrl+${shortcut}`);
   }
 

From fe74b4d11f009319346b8499b2947e7596540168 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Thu, 13 Jun 2019 12:57:56 -0700
Subject: [PATCH 08/18] Updated tests for getPrettyShortcut

---
 .../lib/__tests__/get_pretty_shortcut.test.ts | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts b/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
index 93d1b02b22fb2..16d5cc0d4a97a 100644
--- a/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
+++ b/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
@@ -9,70 +9,70 @@ import { getPrettyShortcut } from '../get_pretty_shortcut';
 describe('getPrettyShortcut', () => {
   test('uppercases shortcuts', () => {
     expect(getPrettyShortcut('g')).toBe('G');
-    expect(getPrettyShortcut('shift+click')).toBe('SHIFT+CLICK');
+    expect(getPrettyShortcut('shift click')).toBe('SHIFT CLICK');
     expect(getPrettyShortcut('backspace')).toBe('BACKSPACE');
   });
   test('preserves shortcut order', () => {
-    expect(getPrettyShortcut('command+c')).toBe('⌘+C');
-    expect(getPrettyShortcut('c+command')).toBe('C+⌘');
+    expect(getPrettyShortcut('command c')).toBe('⌘ C');
+    expect(getPrettyShortcut('c command')).toBe('C ⌘');
   });
   test(`replaces 'command' with ⌘`, () => {
     expect(getPrettyShortcut('command')).toBe('⌘');
-    expect(getPrettyShortcut('command+c')).toBe('⌘+C');
-    expect(getPrettyShortcut('command+shift+b')).toBe('⌘+SHIFT+B');
+    expect(getPrettyShortcut('command c')).toBe('⌘ C');
+    expect(getPrettyShortcut('command shift b')).toBe('⌘ SHIFT B');
   });
   test(`replaces 'option' with ⌥`, () => {
     expect(getPrettyShortcut('option')).toBe('⌥');
-    expect(getPrettyShortcut('option+f')).toBe('⌥+F');
-    expect(getPrettyShortcut('option+shift+G')).toBe('⌥+SHIFT+G');
-    expect(getPrettyShortcut('command+option+shift+G')).toBe('⌘+⌥+SHIFT+G');
+    expect(getPrettyShortcut('option f')).toBe('⌥ F');
+    expect(getPrettyShortcut('option shift G')).toBe('⌥ SHIFT G');
+    expect(getPrettyShortcut('command option shift G')).toBe('⌘ ⌥ SHIFT G');
   });
   test(`replaces 'left' with ←`, () => {
     expect(getPrettyShortcut('left')).toBe('←');
-    expect(getPrettyShortcut('command+left')).toBe('⌘+←');
-    expect(getPrettyShortcut('option+left')).toBe('⌥+←');
-    expect(getPrettyShortcut('option+shift+left')).toBe('⌥+SHIFT+←');
-    expect(getPrettyShortcut('command+shift+left')).toBe('⌘+SHIFT+←');
-    expect(getPrettyShortcut('command+option+shift+left')).toBe('⌘+⌥+SHIFT+←');
+    expect(getPrettyShortcut('command left')).toBe('⌘ ←');
+    expect(getPrettyShortcut('option left')).toBe('⌥ ←');
+    expect(getPrettyShortcut('option shift left')).toBe('⌥ SHIFT ←');
+    expect(getPrettyShortcut('command shift left')).toBe('⌘ SHIFT ←');
+    expect(getPrettyShortcut('command option shift left')).toBe('⌘ ⌥ SHIFT ←');
   });
   test(`replaces 'right' with →`, () => {
     expect(getPrettyShortcut('right')).toBe('→');
-    expect(getPrettyShortcut('command+right')).toBe('⌘+→');
-    expect(getPrettyShortcut('option+right')).toBe('⌥+→');
-    expect(getPrettyShortcut('option+shift+right')).toBe('⌥+SHIFT+→');
-    expect(getPrettyShortcut('command+shift+right')).toBe('⌘+SHIFT+→');
-    expect(getPrettyShortcut('command+option+shift+right')).toBe('⌘+⌥+SHIFT+→');
+    expect(getPrettyShortcut('command right')).toBe('⌘ →');
+    expect(getPrettyShortcut('option right')).toBe('⌥ →');
+    expect(getPrettyShortcut('option shift right')).toBe('⌥ SHIFT →');
+    expect(getPrettyShortcut('command shift right')).toBe('⌘ SHIFT →');
+    expect(getPrettyShortcut('command option shift right')).toBe('⌘ ⌥ SHIFT →');
   });
   test(`replaces 'up' with ←`, () => {
     expect(getPrettyShortcut('up')).toBe('↑');
-    expect(getPrettyShortcut('command+up')).toBe('⌘+↑');
-    expect(getPrettyShortcut('option+up')).toBe('⌥+↑');
-    expect(getPrettyShortcut('option+shift+up')).toBe('⌥+SHIFT+↑');
-    expect(getPrettyShortcut('command+shift+up')).toBe('⌘+SHIFT+↑');
-    expect(getPrettyShortcut('command+option+shift+up')).toBe('⌘+⌥+SHIFT+↑');
+    expect(getPrettyShortcut('command up')).toBe('⌘ ↑');
+    expect(getPrettyShortcut('option up')).toBe('⌥ ↑');
+    expect(getPrettyShortcut('option shift up')).toBe('⌥ SHIFT ↑');
+    expect(getPrettyShortcut('command shift up')).toBe('⌘ SHIFT ↑');
+    expect(getPrettyShortcut('command option shift up')).toBe('⌘ ⌥ SHIFT ↑');
   });
   test(`replaces 'down' with ↓`, () => {
     expect(getPrettyShortcut('down')).toBe('↓');
-    expect(getPrettyShortcut('command+down')).toBe('⌘+↓');
-    expect(getPrettyShortcut('option+down')).toBe('⌥+↓');
-    expect(getPrettyShortcut('option+shift+down')).toBe('⌥+SHIFT+↓');
-    expect(getPrettyShortcut('command+shift+down')).toBe('⌘+SHIFT+↓');
-    expect(getPrettyShortcut('command+option+shift+down')).toBe('⌘+⌥+SHIFT+↓');
+    expect(getPrettyShortcut('command down')).toBe('⌘ ↓');
+    expect(getPrettyShortcut('option down')).toBe('⌥ ↓');
+    expect(getPrettyShortcut('option shift down')).toBe('⌥ SHIFT ↓');
+    expect(getPrettyShortcut('command shift down')).toBe('⌘ SHIFT ↓');
+    expect(getPrettyShortcut('command option shift down')).toBe('⌘ ⌥ SHIFT ↓');
   });
-  test(`replaces 'plus' with +`, () => {
-    expect(getPrettyShortcut('plus')).toBe('+');
-    expect(getPrettyShortcut('command+plus')).toBe('⌘++');
-    expect(getPrettyShortcut('option+plus')).toBe('⌥++');
-    expect(getPrettyShortcut('option+shift+plus')).toBe('⌥+SHIFT++');
-    expect(getPrettyShortcut('command+shift+plus')).toBe('⌘+SHIFT++');
-    expect(getPrettyShortcut('command+option+shift+plus')).toBe('⌘+⌥+SHIFT++');
+  test(`replaces 'plus' with  `, () => {
+    expect(getPrettyShortcut('plus')).toBe(' ');
+    expect(getPrettyShortcut('command plus')).toBe('⌘ +');
+    expect(getPrettyShortcut('option plus')).toBe('⌥ +');
+    expect(getPrettyShortcut('option shift plus')).toBe('⌥ SHIFT +');
+    expect(getPrettyShortcut('command shift plus')).toBe('⌘ SHIFT +');
+    expect(getPrettyShortcut('command option shift plus')).toBe('⌘ ⌥ SHIFT +');
   });
   test(`replaces 'minus' with -`, () => {
     expect(getPrettyShortcut('minus')).toBe('-');
-    expect(getPrettyShortcut('command+minus')).toBe('⌘+-');
-    expect(getPrettyShortcut('option+minus')).toBe('⌥+-');
-    expect(getPrettyShortcut('option+shift+minus')).toBe('⌥+SHIFT+-');
-    expect(getPrettyShortcut('command+shift+minus')).toBe('⌘+SHIFT+-');
-    expect(getPrettyShortcut('command+option+shift+minus')).toBe('⌘+⌥+SHIFT+-');
+    expect(getPrettyShortcut('command minus')).toBe('⌘ -');
+    expect(getPrettyShortcut('option minus')).toBe('⌥ -');
+    expect(getPrettyShortcut('option shift minus')).toBe('⌥ SHIFT -');
+    expect(getPrettyShortcut('command shift minus')).toBe('⌘ SHIFT -');
+    expect(getPrettyShortcut('command option shift minus')).toBe('⌘ ⌥ SHIFT -');
   });
 });

From 88d1e21055e51ca9d2da161b65f20d0a0d33835f Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Thu, 13 Jun 2019 13:23:32 -0700
Subject: [PATCH 09/18] Added tooltip shortcuts

---
 .../workpad_header/workpad_header.js           | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
index 8b7ef6ef88d03..fc27d0750ec15 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
@@ -133,7 +133,14 @@ export class WorkpadHeader extends React.PureComponent {
                 </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiToolTip position="bottom" content="Zoom out">
+                <EuiToolTip
+                  position="bottom"
+                  content={
+                    <span>
+                      Zoom Out <ToolTipShortcut namespace="EDITOR" action="ZOOM_OUT" />
+                    </span>
+                  }
+                >
                   <EuiButtonIcon
                     iconType="starMinusFilled"
                     onClick={zoomOut}
@@ -143,7 +150,14 @@ export class WorkpadHeader extends React.PureComponent {
                 </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiToolTip position="bottom" content="Zoom in">
+                <EuiToolTip
+                  position="bottom"
+                  content={
+                    <span>
+                      Zoom In <ToolTipShortcut namespace="EDITOR" action="ZOOM_IN" />
+                    </span>
+                  }
+                >
                   <EuiButtonIcon
                     iconType="starPlusFilled"
                     onClick={zoomIn}

From 773c70fdd5cdb33af0248b64e9196a6dc8f015cf Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Thu, 13 Jun 2019 17:12:28 -0500
Subject: [PATCH 10/18] define interface sections

---
 .../canvas/public/apps/workpad/workpad_app/workpad_app.scss  | 5 ++++-
 .../public/components/sidebar_header/sidebar_header.scss     | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
index a27b18c5b4c57..adbb3a3640d76 100644
--- a/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
+++ b/x-pack/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
@@ -30,8 +30,10 @@ $canvasLayoutFontSize: $euiFontSizeS;
 .canvasLayout__stageHeader {
   flex-grow: 0;
   flex-basis: auto;
-  padding: $euiSizeM $euiSize $euiSizeS $euiSize;
+  padding: ($euiSizeXS +1px) $euiSize $euiSizeXS $euiSize;
   font-size: $canvasLayoutFontSize;
+  border-bottom: $euiBorderThin;
+  background: $euiColorLightestShade;
 }
 
 .canvasLayout__stageContent {
@@ -60,6 +62,7 @@ $canvasLayoutFontSize: $euiFontSizeS;
   background: $euiColorLightestShade;
   display: flex;
   position: relative;
+  border-left: $euiBorderThin;
 
   .euiPanel {
     margin-bottom: $euiSizeS;
diff --git a/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss b/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
index 613e101759e74..7f5ece069b46e 100644
--- a/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
+++ b/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
@@ -1,5 +1,5 @@
 .canvasLayout__sidebarHeader {
-  padding: $euiSizeS 0;
+  padding: ($euiSizeXS * .5) 0;
 }
 
 .canvasContextMenu--topBorder {

From 5dfd6a28421832aea9130da62419faf50b829dd3 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Thu, 13 Jun 2019 13:46:17 -0700
Subject: [PATCH 11/18] Added preventDefault to workpad shortcuts

---
 .../public/components/workpad/workpad.js      | 54 +++++++------------
 1 file changed, 20 insertions(+), 34 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js
index 0d7379baba552..5b711ee709f6b 100644
--- a/x-pack/plugins/canvas/public/components/workpad/workpad.js
+++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js
@@ -10,6 +10,7 @@ import { Shortcuts } from 'react-shortcuts';
 import Style from 'style-it';
 import { WorkpadPage } from '../workpad_page';
 import { Fullscreen } from '../fullscreen';
+import { isTextInput } from '../../lib/is_text_input';
 
 const WORKPAD_CANVAS_BUFFER = 32; // 32px padding around the workpad
 
@@ -35,40 +36,25 @@ export class Workpad extends React.PureComponent {
     unregisterLayout: PropTypes.func.isRequired,
   };
 
-  keyHandler = action => {
-    const {
-      fetchAllRenderables,
-      undoHistory,
-      redoHistory,
-      nextPage,
-      previousPage,
-      grid, // TODO: Get rid of grid when we improve the layout engine
-      setGrid,
-      zoomIn,
-      zoomOut,
-    } = this.props;
-
-    // handle keypress events for editor and presentation events
+  // handle keypress events for editor and presentation events
+  _keyMap = {
     // this exists in both contexts
-    switch (action) {
-      case 'REFRESH':
-        return fetchAllRenderables();
-      case 'ZOOM_IN':
-        return zoomIn();
-      case 'ZOOM_OUT':
-        return zoomOut();
-      // editor events
-      case 'UNDO':
-        return undoHistory();
-      case 'REDO':
-        return redoHistory();
-      case 'GRID':
-        return setGrid(!grid);
-      // presentation events
-      case 'PREV':
-        return previousPage();
-      case 'NEXT':
-        return nextPage();
+    REFRESH: this.props.fetchAllRenderables,
+    // editor events
+    ZOOM_IN: this.props.zoomIn,
+    UNDO: this.props.blah,
+    REDO: this.props.blah,
+    GRID: this.props.blah,
+    ZOOM_OUT: this.props.zoomOut,
+    // presentation events
+    PREV: this.props.blah,
+    NEXT: this.props.blah,
+  };
+
+  _keyHandler = (action, event) => {
+    if (!isTextInput(event.target)) {
+      event.preventDefault();
+      this._keyMap[action]();
     }
   };
 
@@ -106,7 +92,7 @@ export class Workpad extends React.PureComponent {
           }}
         >
           {!isFullscreen && (
-            <Shortcuts name="EDITOR" handler={this.keyHandler} targetNodeSelector="body" global />
+            <Shortcuts name="EDITOR" handler={this._keyHandler} targetNodeSelector="body" global />
           )}
 
           <Fullscreen>

From 1abafb8f11ce78aa0b278533897711f8b0324f71 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Mon, 17 Jun 2019 10:04:58 -0700
Subject: [PATCH 12/18] Refactor key handler

---
 .../canvas/public/components/workpad/workpad.js        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js
index 5b711ee709f6b..247f04fd6f899 100644
--- a/x-pack/plugins/canvas/public/components/workpad/workpad.js
+++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js
@@ -41,14 +41,14 @@ export class Workpad extends React.PureComponent {
     // this exists in both contexts
     REFRESH: this.props.fetchAllRenderables,
     // editor events
+    UNDO: this.props.undoHistory,
+    REDO: this.props.redoHistory,
+    GRID: () => this.props.setGrid(!this.props.grid),
     ZOOM_IN: this.props.zoomIn,
-    UNDO: this.props.blah,
-    REDO: this.props.blah,
-    GRID: this.props.blah,
     ZOOM_OUT: this.props.zoomOut,
     // presentation events
-    PREV: this.props.blah,
-    NEXT: this.props.blah,
+    PREV: this.props.previousPage,
+    NEXT: this.props.nextPage,
   };
 
   _keyHandler = (action, event) => {

From d479e9fa034d621f47fddb468396e96d84bd80bd Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Mon, 17 Jun 2019 21:56:39 -0700
Subject: [PATCH 13/18] Added zoom context menu

---
 x-pack/plugins/canvas/common/lib/constants.ts |   2 +-
 .../canvas/public/apps/workpad/routes.js      |   4 +
 .../sidebar_header/sidebar_header.scss        |   6 +-
 .../public/components/workpad_header/index.js |  18 +--
 .../workpad_header/workpad_header.js          |  37 +-----
 .../workpad_header/workpad_zoom/index.tsx     |  33 ++++++
 .../workpad_zoom/workpad_zoom.scss            |  11 ++
 .../workpad_zoom/workpad_zoom.tsx             | 106 ++++++++++++++++++
 .../event_handlers.js                         |   1 +
 .../canvas/public/state/initial_state.js      |   2 +-
 x-pack/plugins/canvas/public/style/main.scss  |   4 +
 11 files changed, 170 insertions(+), 54 deletions(-)
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss
 create mode 100644 x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx

diff --git a/x-pack/plugins/canvas/common/lib/constants.ts b/x-pack/plugins/canvas/common/lib/constants.ts
index c2517db3d095c..389747256860c 100644
--- a/x-pack/plugins/canvas/common/lib/constants.ts
+++ b/x-pack/plugins/canvas/common/lib/constants.ts
@@ -25,6 +25,6 @@ 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 ZOOM_LEVELS = [0.5, 0.75, 0.9, 1, 1.5, 2, 3, 4];
+export const ZOOM_LEVELS = [0.2, 0.3, 0.4, 0.5, 0.75, 1, 1.5, 2, 3, 4];
 export const MIN_ZOOM_LEVEL = ZOOM_LEVELS[0];
 export const MAX_ZOOM_LEVEL = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
diff --git a/x-pack/plugins/canvas/public/apps/workpad/routes.js b/x-pack/plugins/canvas/public/apps/workpad/routes.js
index 0618a39075920..3311af01dc18b 100644
--- a/x-pack/plugins/canvas/public/apps/workpad/routes.js
+++ b/x-pack/plugins/canvas/public/apps/workpad/routes.js
@@ -12,6 +12,7 @@ import { setWorkpad } from '../../state/actions/workpad';
 import { setAssets, resetAssets } from '../../state/actions/assets';
 import { setPage } from '../../state/actions/pages';
 import { getWorkpad } from '../../state/selectors/workpad';
+import { setZoomScale } from '../../state/actions/transient';
 import { WorkpadApp } from './workpad_app';
 
 export const routes = [
@@ -51,6 +52,9 @@ export const routes = [
               const { assets, ...workpad } = fetchedWorkpad;
               dispatch(setWorkpad(workpad));
               dispatch(setAssets(assets));
+
+              // reset transient properties when changing workpads
+              dispatch(setZoomScale(1));
             } catch (err) {
               notify.error(err, { title: `Couldn't load workpad with ID` });
               return router.redirectTo('home');
diff --git a/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss b/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
index 7f5ece069b46e..fe52e652c08a4 100644
--- a/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
+++ b/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
@@ -1,7 +1,3 @@
 .canvasLayout__sidebarHeader {
-  padding: ($euiSizeXS * .5) 0;
-}
-
-.canvasContextMenu--topBorder {
-  border-top: $euiBorderThin;
+  padding: ($euiSizeXS * 0.5) 0;
 }
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/index.js b/x-pack/plugins/canvas/public/components/workpad_header/index.js
index e4779fa7c68e2..d4ecddebde1ae 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/index.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/index.js
@@ -4,25 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { compose, withHandlers } from 'recompose';
 import { connect } from 'react-redux';
-import { canUserWrite, getZoomScale } from '../../state/selectors/app';
+import { canUserWrite } from '../../state/selectors/app';
 import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
 import { setWriteable } from '../../state/actions/workpad';
-import { setZoomScale } from '../../state/actions/transient';
-import { zoomHandlerCreators } from '../../lib/app_handler_creators';
 import { WorkpadHeader as Component } from './workpad_header';
 
 const mapStateToProps = state => ({
   isWriteable: isWriteable(state) && canUserWrite(state),
   canUserWrite: canUserWrite(state),
   selectedPage: getSelectedPage(state),
-  zoomScale: getZoomScale(state),
 });
 
 const mapDispatchToProps = dispatch => ({
   setWriteable: isWriteable => dispatch(setWriteable(isWriteable)),
-  setZoomScale: scale => dispatch(setZoomScale(scale)),
 });
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => ({
@@ -32,11 +27,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   toggleWriteable: () => setWriteable(!stateProps.isWriteable),
 });
 
-export const WorkpadHeader = compose(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-    mergeProps
-  ),
-  withHandlers(zoomHandlerCreators)
+export const WorkpadHeader = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
 )(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
index fc27d0750ec15..5cd11058934c5 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.js
@@ -20,11 +20,11 @@ import {
 import { AssetManager } from '../asset_manager';
 import { ElementTypes } from '../element_types';
 import { ToolTipShortcut } from '../tool_tip_shortcut/';
-import { MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL } from '../../../common/lib/constants';
 import { ControlSettings } from './control_settings';
 import { RefreshControl } from './refresh_control';
 import { FullscreenControl } from './fullscreen_control';
 import { WorkpadExport } from './workpad_export';
+import { WorkpadZoom } from './workpad_zoom';
 
 export class WorkpadHeader extends React.PureComponent {
   static propTypes = {
@@ -92,7 +92,7 @@ export class WorkpadHeader extends React.PureComponent {
   };
 
   render() {
-    const { isWriteable, canUserWrite, toggleWriteable, zoomScale, zoomIn, zoomOut } = this.props;
+    const { isWriteable, canUserWrite, toggleWriteable } = this.props;
     const { isModalVisible } = this.state;
 
     return (
@@ -133,38 +133,7 @@ export class WorkpadHeader extends React.PureComponent {
                 </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiToolTip
-                  position="bottom"
-                  content={
-                    <span>
-                      Zoom Out <ToolTipShortcut namespace="EDITOR" action="ZOOM_OUT" />
-                    </span>
-                  }
-                >
-                  <EuiButtonIcon
-                    iconType="starMinusFilled"
-                    onClick={zoomOut}
-                    disabled={zoomScale === MIN_ZOOM_LEVEL}
-                    aria-label="Zoom out"
-                  />
-                </EuiToolTip>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiToolTip
-                  position="bottom"
-                  content={
-                    <span>
-                      Zoom In <ToolTipShortcut namespace="EDITOR" action="ZOOM_IN" />
-                    </span>
-                  }
-                >
-                  <EuiButtonIcon
-                    iconType="starPlusFilled"
-                    onClick={zoomIn}
-                    disabled={zoomScale === MAX_ZOOM_LEVEL}
-                    aria-label="Zoom in"
-                  />
-                </EuiToolTip>
+                <WorkpadZoom />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
new file mode 100644
index 0000000000000..279a4eb83bb03
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { compose, withHandlers } from 'recompose';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { getZoomScale } from '../../../state/selectors/app';
+import { setZoomScale } from '../../../state/actions/transient';
+import { zoomHandlerCreators } from '../../../lib/app_handler_creators';
+import { WorkpadZoom as Component, Props as ComponentProps } from './workpad_zoom';
+
+interface State {
+  transient: { zoomScale: number };
+}
+
+const mapStateToProps = (state: State) => ({
+  zoomScale: getZoomScale(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),
+});
+
+export const WorkpadZoom = compose<ComponentProps, void>(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
+  withHandlers(zoomHandlerCreators)
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss
new file mode 100644
index 0000000000000..44209aaa72d63
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss
@@ -0,0 +1,11 @@
+.canvasWorkpadExport__panelContent {
+  padding: $euiSize;
+}
+
+.canvasWorkpadExport__reportingConfig {
+  .euiCodeBlock__pre {
+    @include euiScrollBar;
+    overflow-x: auto;
+    white-space: pre;
+  }
+}
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
new file mode 100644
index 0000000000000..07e585883df70
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { MouseEventHandler, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import {
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiContextMenuPanelItemDescriptor,
+} from '@elastic/eui';
+import { Popover } from '../../popover';
+import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from '../../../../common/lib/constants';
+
+export interface Props {
+  /**
+   * current workpad zoom level
+   */
+  zoomScale: number;
+  /**
+   * handler to set the workpad zoom level to a specific value
+   */
+  setZoomScale: (scale: number) => void;
+  /**
+   * handler to increase the workpad zoom level
+   */
+  zoomIn: () => void;
+  /**
+   * handler to decrease workpad zoom level
+   */
+  zoomOut: () => void;
+}
+
+const QUICK_ZOOM_LEVELS = [0.5, 1, 2];
+
+export class WorkpadZoom extends PureComponent<Props> {
+  static propTypes = {
+    zoomScale: PropTypes.number.isRequired,
+    setZoomScale: PropTypes.func.isRequired,
+    zoomIn: PropTypes.func.isRequired,
+    zoomOut: PropTypes.func.isRequired,
+  };
+
+  _button = (togglePopover: MouseEventHandler<HTMLButtonElement>) => (
+    <EuiButtonIcon
+      iconType="starPlusFilled"
+      aria-label="Share this workpad"
+      onClick={togglePopover}
+    />
+  );
+
+  _getPrettyZoomLevel = (scale: number) => `${scale * 100}%`;
+
+  _getScaleMenuItems = (): EuiContextMenuPanelItemDescriptor[] =>
+    QUICK_ZOOM_LEVELS.map(scale => ({
+      name: this._getPrettyZoomLevel(scale),
+      icon: 'empty',
+      onClick: () => this.props.setZoomScale(scale),
+    }));
+
+  _getPanels = (): EuiContextMenuPanelDescriptor[] => {
+    const { zoomScale, zoomIn, zoomOut } = this.props;
+    const items: EuiContextMenuPanelItemDescriptor[] = [
+      ...this._getScaleMenuItems(),
+      {
+        name: 'Zoom in',
+        icon: 'starPlusFilled',
+        onClick: zoomIn,
+        disabled: zoomScale === MAX_ZOOM_LEVEL,
+        className: 'canvasContextMenu--topBorder',
+      },
+      {
+        name: 'Zoom out',
+        icon: 'starMinusFilled',
+        onClick: zoomOut,
+        disabled: zoomScale === MIN_ZOOM_LEVEL,
+      },
+    ];
+
+    const panels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 0,
+        title: `Zoom`,
+        items,
+      },
+    ];
+
+    return panels;
+  };
+
+  render() {
+    return (
+      <Popover
+        button={this._button}
+        panelPaddingSize="none"
+        tooltip="Zoom"
+        tooltipPosition="bottom"
+      >
+        {() => <EuiContextMenu initialPanelId={0} panels={this._getPanels()} />}
+      </Popover>
+    );
+  }
+}
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
index b15bc0e2474f6..3de6fe959fdb3 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
@@ -7,6 +7,7 @@
 const localMousePosition = (canvasOrigin, clientX, clientY, zoomScale = 1) => {
   const { left, top } = canvasOrigin();
   return {
+    // commit unscaled coordinates
     x: (clientX - left) * (1 / zoomScale),
     y: (clientY - top) * (1 / zoomScale),
   };
diff --git a/x-pack/plugins/canvas/public/state/initial_state.js b/x-pack/plugins/canvas/public/state/initial_state.js
index ba4576a2140f9..4ca4713fa8fb7 100644
--- a/x-pack/plugins/canvas/public/state/initial_state.js
+++ b/x-pack/plugins/canvas/public/state/initial_state.js
@@ -14,7 +14,7 @@ export const getInitialState = path => {
     assets: {}, // assets end up here
     transient: {
       canUserWrite: capabilities.get().canvas.save,
-      zoomLevel: 1,
+      zoomScale: 1,
       elementStats: {
         total: 0,
         ready: 0,
diff --git a/x-pack/plugins/canvas/public/style/main.scss b/x-pack/plugins/canvas/public/style/main.scss
index ef3057ca539a6..84a06813de282 100644
--- a/x-pack/plugins/canvas/public/style/main.scss
+++ b/x-pack/plugins/canvas/public/style/main.scss
@@ -36,6 +36,10 @@ $canvasElementCardWidth: 210px;
   max-width: 100%;
 }
 
+.canvasContextMenu--topBorder {
+  border-top: $euiBorderThin;
+}
+
 #canvas-app {
   overflow-y: hidden;
 

From c446a99dd30c7fa75e9067a812bb3839b949e54f Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Tue, 18 Jun 2019 10:18:27 -0700
Subject: [PATCH 14/18] Updated zoom levels

---
 x-pack/plugins/canvas/common/lib/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/canvas/common/lib/constants.ts b/x-pack/plugins/canvas/common/lib/constants.ts
index 389747256860c..f1ba49d51e6b7 100644
--- a/x-pack/plugins/canvas/common/lib/constants.ts
+++ b/x-pack/plugins/canvas/common/lib/constants.ts
@@ -25,6 +25,6 @@ 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 ZOOM_LEVELS = [0.2, 0.3, 0.4, 0.5, 0.75, 1, 1.5, 2, 3, 4];
+export const ZOOM_LEVELS = [0.25, 0.33, 0.5, 0.67, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4];
 export const MIN_ZOOM_LEVEL = ZOOM_LEVELS[0];
 export const MAX_ZOOM_LEVEL = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];

From b5623db90a8dd16c8d6d2044cf16fa43f2fa1e6c Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 19 Jun 2019 12:55:34 -0700
Subject: [PATCH 15/18] Fixed ts errors and tests

---
 .../keyboard_shortcuts_doc.examples.storyshot | 86 +++++++++++++++++++
 .../workpad_header/workpad_zoom/index.tsx     |  2 +
 .../workpad_zoom/workpad_zoom.tsx             |  1 +
 .../lib/__tests__/get_pretty_shortcut.test.ts |  4 +-
 4 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.examples.storyshot b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.examples.storyshot
index 939f3fd777533..33b57aac697be 100644
--- a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.examples.storyshot
+++ b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.examples.storyshot
@@ -884,6 +884,92 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                     </span>
                   </span>
                 </dd>
+                <dt
+                  className="euiDescriptionList__title"
+                >
+                  Zoom in
+                </dt>
+                <dd
+                  className="euiDescriptionList__description"
+                >
+                  <span>
+                    <span
+                      className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+                      style={Object {}}
+                    >
+                      <code
+                        className="euiCodeBlock__code"
+                      >
+                        CTRL
+                      </code>
+                    </span>
+                     
+                    <span
+                      className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+                      style={Object {}}
+                    >
+                      <code
+                        className="euiCodeBlock__code"
+                      >
+                        ALT
+                      </code>
+                    </span>
+                     
+                    <span
+                      className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+                      style={Object {}}
+                    >
+                      <code
+                        className="euiCodeBlock__code"
+                      >
+                        +
+                      </code>
+                    </span>
+                  </span>
+                </dd>
+                <dt
+                  className="euiDescriptionList__title"
+                >
+                  Zoom out
+                </dt>
+                <dd
+                  className="euiDescriptionList__description"
+                >
+                  <span>
+                    <span
+                      className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+                      style={Object {}}
+                    >
+                      <code
+                        className="euiCodeBlock__code"
+                      >
+                        CTRL
+                      </code>
+                    </span>
+                     
+                    <span
+                      className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+                      style={Object {}}
+                    >
+                      <code
+                        className="euiCodeBlock__code"
+                      >
+                        ALT
+                      </code>
+                    </span>
+                     
+                    <span
+                      className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+                      style={Object {}}
+                    >
+                      <code
+                        className="euiCodeBlock__code"
+                      >
+                        -
+                      </code>
+                    </span>
+                  </span>
+                </dd>
               </dl>
               <div
                 className="euiSpacer euiSpacer--l"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
index 279a4eb83bb03..55ceb3f65004f 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
@@ -7,7 +7,9 @@
 import { compose, withHandlers } from 'recompose';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
+// @ts-ignore unconverted local file
 import { getZoomScale } from '../../../state/selectors/app';
+// @ts-ignore unconverted local file
 import { setZoomScale } from '../../../state/actions/transient';
 import { zoomHandlerCreators } from '../../../lib/app_handler_creators';
 import { WorkpadZoom as Component, Props as ComponentProps } from './workpad_zoom';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
index 07e585883df70..4b4958b312c19 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
@@ -12,6 +12,7 @@ import {
   EuiContextMenuPanelDescriptor,
   EuiContextMenuPanelItemDescriptor,
 } from '@elastic/eui';
+// @ts-ignore unconverted local component
 import { Popover } from '../../popover';
 import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from '../../../../common/lib/constants';
 
diff --git a/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts b/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
index 16d5cc0d4a97a..783b085f3da7e 100644
--- a/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
+++ b/x-pack/plugins/canvas/public/lib/__tests__/get_pretty_shortcut.test.ts
@@ -59,8 +59,8 @@ describe('getPrettyShortcut', () => {
     expect(getPrettyShortcut('command shift down')).toBe('⌘ SHIFT ↓');
     expect(getPrettyShortcut('command option shift down')).toBe('⌘ ⌥ SHIFT ↓');
   });
-  test(`replaces 'plus' with  `, () => {
-    expect(getPrettyShortcut('plus')).toBe(' ');
+  test(`replaces 'plus' with +`, () => {
+    expect(getPrettyShortcut('plus')).toBe('+');
     expect(getPrettyShortcut('command plus')).toBe('⌘ +');
     expect(getPrettyShortcut('option plus')).toBe('⌥ +');
     expect(getPrettyShortcut('option shift plus')).toBe('⌥ SHIFT +');

From b94e59fd4a1767d7dabf2fe24786ba043a10ceea Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Tue, 25 Jun 2019 10:52:24 -0700
Subject: [PATCH 16/18] Simplified mouse coordinate calculation

---
 .../workpad_page/workpad_interactive_page/event_handlers.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js b/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
index 3de6fe959fdb3..8f81d3e1c808c 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js
@@ -8,8 +8,8 @@ const localMousePosition = (canvasOrigin, clientX, clientY, zoomScale = 1) => {
   const { left, top } = canvasOrigin();
   return {
     // commit unscaled coordinates
-    x: (clientX - left) * (1 / zoomScale),
-    y: (clientY - top) * (1 / zoomScale),
+    x: (clientX - left) / zoomScale,
+    y: (clientY - top) / zoomScale,
   };
 };
 

From 9eeef5f97990c734b272b1887e903905fcf17cea Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Tue, 25 Jun 2019 12:03:25 -0700
Subject: [PATCH 17/18] Moved new files to x-pack/legacy/plugins/canvas

---
 .../public/components/workpad_header/workpad_zoom/index.tsx       | 0
 .../components/workpad_header/workpad_zoom/workpad_zoom.scss      | 0
 .../components/workpad_header/workpad_zoom/workpad_zoom.tsx       | 0
 .../plugins/canvas/public/lib/app_handler_creators.ts             | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename x-pack/{ => legacy}/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx (100%)
 rename x-pack/{ => legacy}/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss (100%)
 rename x-pack/{ => legacy}/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx (100%)
 rename x-pack/{ => legacy}/plugins/canvas/public/lib/app_handler_creators.ts (100%)

diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/index.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss
rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.scss
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
diff --git a/x-pack/plugins/canvas/public/lib/app_handler_creators.ts b/x-pack/legacy/plugins/canvas/public/lib/app_handler_creators.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/lib/app_handler_creators.ts
rename to x-pack/legacy/plugins/canvas/public/lib/app_handler_creators.ts

From 4b44117de5937cdfbaf202e80eadc7546a7e570a Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Tue, 25 Jun 2019 12:08:39 -0700
Subject: [PATCH 18/18] Added TODOs to change icons

---
 .../components/workpad_header/workpad_zoom/workpad_zoom.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
index 4b4958b312c19..c4ba3a32f51b7 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx
@@ -47,7 +47,7 @@ export class WorkpadZoom extends PureComponent<Props> {
 
   _button = (togglePopover: MouseEventHandler<HTMLButtonElement>) => (
     <EuiButtonIcon
-      iconType="starPlusFilled"
+      iconType="starPlusFilled" // TODO: change this to magnifyWithPlus when available
       aria-label="Share this workpad"
       onClick={togglePopover}
     />
@@ -68,14 +68,14 @@ export class WorkpadZoom extends PureComponent<Props> {
       ...this._getScaleMenuItems(),
       {
         name: 'Zoom in',
-        icon: 'starPlusFilled',
+        icon: 'starPlusFilled', // TODO: change this to magnifyWithPlus when available
         onClick: zoomIn,
         disabled: zoomScale === MAX_ZOOM_LEVEL,
         className: 'canvasContextMenu--topBorder',
       },
       {
         name: 'Zoom out',
-        icon: 'starMinusFilled',
+        icon: 'starMinusFilled', // TODO: change this to magnifyWithMinus when available
         onClick: zoomOut,
         disabled: zoomScale === MIN_ZOOM_LEVEL,
       },