[Canvas] Feat: Zoom In/Out

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

@@ -27,3 +27,6 @@ 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;
+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];

x-pack/legacy/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');

x-pack/legacy/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;

x-pack/legacy/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)`,
+    }}
   />
 );
 

x-pack/legacy/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;

x-pack/legacy/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>
 );
 

x-pack/legacy/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;
 }

x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss

@@ -1,7 +1,3 @@
 .canvasLayout__sidebarHeader {
-  padding: $euiSizeS 0;
-}
-
-.canvasContextMenu--topBorder {
-  border-top: $euiBorderThin;
+  padding: ($euiSizeXS * 0.5) 0;
 }

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

@@ -10,13 +10,15 @@ 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 { setZoomScale } from '../../state/actions/transient';
+import { getFullscreen, getZoomScale } from '../../state/selectors/app';
 import {
   getSelectedPageIndex,
   getAllElements,
   getWorkpad,
   getPages,
 } from '../../state/selectors/workpad';
+import { zoomHandlerCreators } from '../../lib/app_handler_creators';
 import { Workpad as Component } from './workpad';
 
 const mapStateToProps = state => {
@@ -30,13 +32,15 @@ const mapStateToProps = state => {
     workpadCss,
     workpadId,
     isFullscreen: getFullscreen(state),
+    zoomScale: getZoomScale(state),
   };
 };
 
 const mapDispatchToProps = {
   undoHistory,
   redoHistory,
   fetchAllRenderables,
+  setZoomScale,
 };
 
 export const Workpad = compose(
@@ -92,5 +96,6 @@ export const Workpad = compose(
       const pageNumber = Math.max(1, props.selectedPageNumber - 1);
       props.onPageChange(pageNumber);
     },
-  })
+  }),
+  withHandlers(zoomHandlerCreators)
 )(Component);

x-pack/legacy/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,
-    } = this.props;
-
-    // handle keypress events for editor and presentation events
+  // handle keypress events for editor and presentation events
+  _keyMap = {
     // this exists in both contexts
-    if (action === 'REFRESH') {
-      return fetchAllRenderables();
-    }
-
+    REFRESH: this.props.fetchAllRenderables,
     // editor events
-    if (action === 'UNDO') {
-      return undoHistory();
-    }
-    if (action === 'REDO') {
-      return redoHistory();
-    }
-    if (action === 'GRID') {
-      return setGrid(!grid);
-    }
-
+    UNDO: this.props.undoHistory,
+    REDO: this.props.redoHistory,
+    GRID: () => this.props.setGrid(!this.props.grid),
+    ZOOM_IN: this.props.zoomIn,
+    ZOOM_OUT: this.props.zoomOut,
     // presentation events
-    if (action === 'PREV') {
-      return previousPage();
-    }
-    if (action === 'NEXT') {
-      return nextPage();
+    PREV: this.props.previousPage,
+    NEXT: this.props.nextPage,
+  };
+
+  _keyHandler = (action, event) => {
+    if (!isTextInput(event.target)) {
+      event.preventDefault();
+      this._keyMap[action]();
     }
   };
 
@@ -86,18 +72,27 @@ export class Workpad extends React.PureComponent {
       isFullscreen,
       registerLayout,
       unregisterLayout,
+      zoomScale,
     } = 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 (
       <div className="canvasWorkpad__buffer" style={bufferStyle}>
-        <div className="canvasCheckered" style={{ height, width }}>
+        <div
+          className="canvasCheckered"
+          style={{
+            height,
+            width,
+            transformOrigin: '0 0',
+            transform: isFullscreen ? undefined : `scale3d(${zoomScale}, ${zoomScale}, 1)`, // don't scale in fullscreen mode
+          }}
+        >
           {!isFullscreen && (
-            <Shortcuts name="EDITOR" handler={this.keyHandler} targetNodeSelector="body" global />
+            <Shortcuts name="EDITOR" handler={this._keyHandler} targetNodeSelector="body" global />
           )}
 
           <Fullscreen>

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

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { compose } from 'recompose';
 import { connect } from 'react-redux';
 import { canUserWrite } from '../../state/selectors/app';
 import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
@@ -25,13 +24,11 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   ...stateProps,
   ...dispatchProps,
   ...ownProps,
-  toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
+  toggleWriteable: () => setWriteable(!stateProps.isWriteable),
 });
 
-export const WorkpadHeader = compose(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-    mergeProps
-  )
+export const WorkpadHeader = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
 )(Component);

x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.js

@@ -24,6 +24,7 @@ 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 = {
@@ -131,6 +132,9 @@ export class WorkpadHeader extends React.PureComponent {
                   />
                 </EuiToolTip>
               </EuiFlexItem>
+              <EuiFlexItem>
+                <WorkpadZoom />
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
           {isWriteable ? (

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

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