Reconcile window + workspace position coordinate systems in our state

__tests__/src/actions/window.test.js

@@ -18,8 +18,8 @@ describe('window actions', () => {
           manifestId: null,
           maximized: false,
           rangeId: null,
-          x: 2700,
-          y: 2700,
+          x: 200,
+          y: 200,
           sideBarPanel: 'info',
           width: 400,
           height: 400,

__tests__/src/components/WorkspaceElastic.test.js

@@ -13,6 +13,8 @@ function createWrapper(props) {
         viewportPosition: {
           x: 20,
           y: 20,
+          width: 5000,
+          height: 5000,
         },
       }}
       setWorkspaceViewportPosition={() => {}}
@@ -59,8 +61,8 @@ describe('WorkspaceElastic', () => {
       .at(2)
       .props().position)
       .toEqual({
-        x: 25,
-        y: 25,
+        x: 2525,
+        y: 2525,
       });
     expect(wrapper
       .find(Rnd)
@@ -92,8 +94,8 @@ describe('WorkspaceElastic', () => {
           y: 200,
         });
       expect(mockDragStop).toHaveBeenCalledWith(1, {
-        x: 200,
-        y: 200,
+        x: -2300,
+        y: -2300,
       });
     });
     it('when windows are resized', () => {
@@ -111,10 +113,12 @@ describe('WorkspaceElastic', () => {
             width: 400,
             height: 200,
           },
-        });
+        }, {}, { x: 0, y: 0 });
       expect(mockOnResize).toHaveBeenCalledWith(1, {
         width: 400,
         height: 200,
+        x: -2500,
+        y: -2500,
       });
     });
   });
@@ -135,8 +139,8 @@ describe('WorkspaceElastic', () => {
           y: 200,
         });
       expect(mockDragStop).toHaveBeenCalledWith({
-        x: 200,
-        y: 200,
+        x: 2700,
+        y: 2700,
       });
     });
   });

src/components/WorkspaceElastic.js

@@ -20,13 +20,21 @@ class WorkspaceElastic extends React.Component {
       updateWindowPosition,
       setWindowSize,
     } = this.props;
+
+    const { viewportPosition } = workspace;
+    const offsetX = viewportPosition.width / 2;
+    const offsetY = viewportPosition.height / 2;
+
     return (
+      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
         <Rnd
           default={{
-          width: 5000,
-          height: 5000,
+            width: viewportPosition.width,
+            height: viewportPosition.height,
+          }}
+          position={{
+            x: viewportPosition.x - offsetX, y: viewportPosition.y - offsetY,
           }}
-        position={{ x: workspace.viewportPosition.x, y: workspace.viewportPosition.y }}
           enableResizing={{
             top: false,
             right: false,
@@ -38,7 +46,7 @@ class WorkspaceElastic extends React.Component {
             topLeft: false,
           }}
           onDragStop={(e, d) => {
-          setWorkspaceViewportPosition({ x: d.x, y: d.y });
+            setWorkspaceViewportPosition({ x: d.x + offsetX, y: d.y + offsetY });
           }}
           cancel={`.${ns('window')}`}
           className={ns('workspace')}
@@ -48,16 +56,17 @@ class WorkspaceElastic extends React.Component {
               <Rnd
                 key={window.id}
                 size={{ width: window.width, height: window.height }}
-              position={{ x: window.x, y: window.y }}
+                position={{ x: window.x + offsetX, y: window.y + offsetY }}
                 bounds="parent"
                 onDragStop={(e, d) => {
-                updateWindowPosition(window.id, { x: d.x, y: d.y });
+                  updateWindowPosition(window.id, { x: d.x - offsetX, y: d.y - offsetY });
                 }}
                 onResize={(e, direction, ref, delta, position) => {
                   setWindowSize(window.id, {
                     width: ref.style.width,
                     height: ref.style.height,
-                  ...position,
+                    x: position.x - offsetX,
+                    y: position.y - offsetY,
                   });
                 }}
                 dragHandleClassName={ns('window-top-bar')}
@@ -72,6 +81,7 @@ class WorkspaceElastic extends React.Component {
             ))
           }
         </Rnd>
+      </div>
     );
   }
 }

src/state/actions/window.js

@@ -29,8 +29,8 @@ export function addWindow(options) {
     thumbnailNavigationId: cwThumbs,
     width: 400,
     height: 400,
-    x: 2700,
-    y: 2700,
+    x: 200,
+    y: 200,
     companionWindowIds: [cwDefault, cwThumbs],
     sideBarPanel: 'info',
     rotation: null,

src/state/reducers/workspace.js

@@ -6,8 +6,10 @@ import ActionTypes from '../actions/action-types';
 export const workspaceReducer = (
   state = { // we'll need to abstract this more, methinks.
     viewportPosition: {
-      x: -2500,
-      y: -2500,
+      x: 0,
+      y: 0,
+      width: 5000,
+      height: 5000,
     },
     exposeModeOn: false,
   },