Use ResizeObserver to store the width + height of the elastic viewport in redux state

__tests__/src/actions/workspace.test.js

@@ -49,6 +49,23 @@ describe('workspace actions', () => {
       expect(actions.setWorkspaceAddVisibility(true)).toEqual(expectedAction);
     });
   });
+  describe('setWorkspaceViewportDimensions', () => {
+    it('should set the workspace add visibility', () => {
+      const expectedAction = {
+        type: ActionTypes.SET_WORKSPACE_VIEWPORT_POSITION,
+        payload: {
+          position: {
+            width: 20,
+            height: 25,
+          },
+        },
+      };
+      expect(actions.setWorkspaceViewportDimensions({
+        width: 20,
+        height: 25,
+      })).toEqual(expectedAction);
+    });
+  });
   describe('setWorkspaceViewportPosition', () => {
     it('should set the workspace add visibility', () => {
       const expectedAction = {

__tests__/src/components/WorkspaceElastic.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import { Rnd } from 'react-rnd';
+import ResizeObserver from 'react-resize-observer';
 import WorkspaceElastic from '../../../src/components/WorkspaceElastic';
 
 /** create wrapper */
@@ -17,6 +18,7 @@ function createWrapper(props) {
           y: 20,
         },
       }}
+      setWorkspaceViewportDimensions={() => {}}
       setWorkspaceViewportPosition={() => {}}
       setWindowSize={() => {}}
       updateWindowPosition={() => {}}
@@ -143,5 +145,26 @@ describe('WorkspaceElastic', () => {
         y: -2700,
       });
     });
+
+    it('when workspace itself is resized', () => {
+      const mockResize = jest.fn();
+      wrapper = createWrapper({
+        windows,
+        setWorkspaceViewportDimensions: mockResize,
+      });
+
+      wrapper
+        .find(ResizeObserver)
+        .at(0)
+        .props()
+        .onResize({
+          width: 500,
+          height: 500,
+        });
+      expect(mockResize).toHaveBeenCalledWith({
+        width: 500,
+        height: 500,
+      });
+    });
   });
 });

__tests__/src/reducers/workspace.test.js

@@ -60,12 +60,16 @@ describe('workspace reducer', () => {
         position: {
           x: 50,
           y: 50,
+          width: 50,
+          height: 50,
         },
       },
     })).toEqual({
       viewportPosition: {
         x: 50,
         y: 50,
+        width: 50,
+        height: 50,
       },
     });
   });

package.json

@@ -55,6 +55,7 @@
     "react-mosaic-component": "^2.1.0",
     "react-placeholder": "^3.0.1",
     "react-redux": "^6.0.0",
+    "react-resize-observer": "^1.1.1",
     "react-rnd": "^9.1.1",
     "react-virtualized": "^9.21.0",
     "redux": "4.0.1",

src/components/WorkspaceElastic.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { Rnd } from 'react-rnd';
+import ResizeObserver from 'react-resize-observer';
 import Window from '../containers/Window';
 import ns from '../config/css-ns';
 
@@ -16,6 +17,7 @@ class WorkspaceElastic extends React.Component {
     const {
       workspace,
       windows,
+      setWorkspaceViewportDimensions,
       setWorkspaceViewportPosition,
       updateWindowPosition,
       setWindowSize,
@@ -27,6 +29,10 @@ class WorkspaceElastic extends React.Component {
 
     return (
       <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+        <ResizeObserver
+          onResize={(rect) => { setWorkspaceViewportDimensions(rect); }}
+        />
+
         <Rnd
           default={{
             width: workspace.width,
@@ -88,6 +94,7 @@ class WorkspaceElastic extends React.Component {
 
 WorkspaceElastic.propTypes = {
   setWorkspaceViewportPosition: PropTypes.func.isRequired,
+  setWorkspaceViewportDimensions: PropTypes.func.isRequired,
   windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   workspace: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   updateWindowPosition: PropTypes.func.isRequired,

src/containers/WorkspaceElastic.js

@@ -15,13 +15,17 @@ const mapStateToProps = state => (
   }
 );
 
-
 /**
  * mapDispatchToProps - used to hook up connect to action creators
  * @memberof Workspace
  * @private
  */
 const mapDispatchToProps = (dispatch, props) => ({
+  setWorkspaceViewportDimensions: (position) => {
+    dispatch(
+      actions.setWorkspaceViewportDimensions(position),
+    );
+  },
   setWorkspaceViewportPosition: (position) => {
     dispatch(
       actions.setWorkspaceViewportPosition(position),

src/state/actions/workspace.js

@@ -45,18 +45,35 @@ export function setWorkspaceAddVisibility(isWorkspaceAddVisible) {
  * @param  {Object} position
  * @memberof ActionCreators
  */
-export function setWorkspaceViewportPosition(position) {
+export function setWorkspaceViewportPosition({ x, y }) {
   return {
     type: ActionTypes.SET_WORKSPACE_VIEWPORT_POSITION,
     payload: {
       position: {
-        x: position.x,
-        y: position.y,
+        x,
+        y,
       },
     },
   };
 }
 
+/**
+ * setWorkspaceViewportDimensions - action creator
+ *
+ * @param  {Object} position
+ * @memberof ActionCreators
+ */
+export function setWorkspaceViewportDimensions({ width, height }) {
+  return {
+    type: ActionTypes.SET_WORKSPACE_VIEWPORT_POSITION,
+    payload: {
+      position: {
+        width,
+        height,
+      },
+    },
+  };
+}
 /**
  * toggleWorkspaceExposeMode - action creator
  *

src/state/reducers/workspace.js

@@ -34,7 +34,13 @@ export const workspaceReducer = (
     case ActionTypes.SET_WORKSPACE_ADD_VISIBILITY:
       return { ...state, isWorkspaceAddVisible: action.isWorkspaceAddVisible };
     case ActionTypes.SET_WORKSPACE_VIEWPORT_POSITION:
-      return { ...state, viewportPosition: action.payload.position };
+      return {
+        ...state,
+        viewportPosition: {
+          ...state.viewportPosition,
+          ...action.payload.position,
+        },
+      };
     case ActionTypes.TOGGLE_WORKSPACE_EXPOSE_MODE:
       return { ...state, exposeModeOn: !state.exposeModeOn };
     default: