Render all pages up front (elastic#263)

public/components/page_stack/index.js

@@ -0,0 +1,4 @@
+import { pure } from 'recompose';
+import { PageStack as Component } from './page_stack';
+
+export const PageStack = pure(Component);

public/components/page_stack/page_stack.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import './page.less';
+import { ElementWrapper } from '../element_wrapper';
+
+export const PageStack = ({ pages, selectedPageId, height, width }) => {
+  return (
+    pages.map(page => (
+      <div
+        key={page.id}
+        className="canvas__page"
+        style={{
+          top: selectedPageId === page.id ? undefined : '-9999999px',
+          left: selectedPageId === page.id ? undefined : '-9999999px',
+          height,
+          width,
+        }}>
+        {
+          page.elements.map(element => (
+            <ElementWrapper key={element.id} element={element} />
+          ))
+        }
+      </div>
+    ))
+  );
+};
+
+PageStack.propTypes = {
+  height: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  pages: PropTypes.array.isRequired,
+  selectedPageId: PropTypes.string.isRequired,
+};

public/components/workpad/index.js

@@ -2,13 +2,15 @@ import { connect } from 'react-redux';
 import { get } from 'lodash';
 import { undoHistory, redoHistory } from '../../state/actions/history';
 import { fetchAllRenderables } from '../../state/actions/elements';
-import { getElements, getPageById, getSelectedPage, getWorkpad } from '../../state/selectors/workpad';
+import { getElements, getPageById, getSelectedPage, getWorkpad, getPages } from '../../state/selectors/workpad';
 import { getFullscreen, getEditing } from '../../state/selectors/app';
 import { nextPage, previousPage } from '../../state/actions/pages';
 import { Workpad as Component } from './workpad';
 
 const mapStateToProps = (state) => {
   return {
+    pages: getPages(state),
+    selectedPageId: getSelectedPage(state),
     elements: getElements(state),
     style: get(getPageById(state, getSelectedPage(state)), 'style'),
     workpad: getWorkpad(state),

public/components/workpad/workpad.js

@@ -1,12 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Shortcuts } from 'react-shortcuts';
-import { ElementWrapper } from '../element_wrapper';
+import { PageStack } from '../page_stack';
 import { Fullscreen } from '../fullscreen';
 import './workpad.less';
 
-export const Workpad = (props) => {
-  const { elements, style, workpad, fetchAllRenderables, undoHistory, redoHistory, nextPage, previousPage, isFullscreen } = props;
+export const Workpad = ({
+  selectedPageId,
+  pages,
+  style,
+  workpad,
+  fetchAllRenderables,
+  undoHistory,
+  redoHistory,
+  nextPage,
+  previousPage,
+  isFullscreen,
+}) => {
   const { height, width } = workpad;
   const itsTheNewStyle = Object.assign({}, style, { height, width });
 
@@ -46,9 +56,7 @@ export const Workpad = (props) => {
                     />
                   }
 
-                  { elements.map(element => (
-                    <ElementWrapper key={element.id} element={element} />
-                  ))}
+                  <PageStack pages={pages} selectedPageId={selectedPageId} height={height} width={width} />
                 </div>
             );
           }}
@@ -58,6 +66,8 @@ export const Workpad = (props) => {
 };
 
 Workpad.propTypes = {
+  pages: PropTypes.array.isRequired,
+  selectedPageId: PropTypes.string.isRequired,
   elements: PropTypes.array.isRequired,
   isFullscreen: PropTypes.bool.isRequired,
   workpad: PropTypes.object.isRequired,

public/components/workpad/workpad.less

@@ -7,6 +7,10 @@
   }
 }
 
+.canvas__page {
+  position: absolute;
+}
+
 // For some bizarre reason, you must repeat the styles in their own blocks or they won’t be applied
 // https://www.sitepoint.com/html5-full-screen-api/
 // #canvas--fullscreen:-moz-full-screen {