diff --git a/__tests__/src/actions/window.test.js b/__tests__/src/actions/window.test.js index e56f8a5dd6507a1bd05e5245e8ac22f2dd6b8fb3..89889961ebd05eb9c0ae7bfe04ea6d0e371d6f33 100644 --- a/__tests__/src/actions/window.test.js +++ b/__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, diff --git a/__tests__/src/components/WorkspaceElastic.test.js b/__tests__/src/components/WorkspaceElastic.test.js index c25985fb7dcfb334c368f8bc85c75ca1363efeeb..a4c0b6dd91ee14e4e93fe1f27bc84aa828025b89 100644 --- a/__tests__/src/components/WorkspaceElastic.test.js +++ b/__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, }); }); }); diff --git a/src/components/WorkspaceElastic.js b/src/components/WorkspaceElastic.js index 0f1baee72e1e2417ac1d2f1205043caf59fc2bc5..13eb84377c4f9ebbcaed3bd60b222eb5264fd766 100644 --- a/src/components/WorkspaceElastic.js +++ b/src/components/WorkspaceElastic.js @@ -20,58 +20,68 @@ class WorkspaceElastic extends React.Component { updateWindowPosition, setWindowSize, } = this.props; + + const { viewportPosition } = workspace; + const offsetX = viewportPosition.width / 2; + const offsetY = viewportPosition.height / 2; + return ( - <Rnd - default={{ - width: 5000, - height: 5000, - }} - position={{ x: workspace.viewportPosition.x, y: workspace.viewportPosition.y }} - enableResizing={{ - top: false, - right: false, - bottom: false, - left: false, - topRight: false, - bottomRight: false, - bottomLeft: false, - topLeft: false, - }} - onDragStop={(e, d) => { - setWorkspaceViewportPosition({ x: d.x, y: d.y }); - }} - cancel={`.${ns('window')}`} - className={ns('workspace')} - > - { - Object.values(windows).map(window => ( - <Rnd - key={window.id} - size={{ width: window.width, height: window.height }} - position={{ x: window.x, y: window.y }} - bounds="parent" - onDragStop={(e, d) => { - updateWindowPosition(window.id, { x: d.x, y: d.y }); - }} - onResize={(e, direction, ref, delta, position) => { - setWindowSize(window.id, { - width: ref.style.width, - height: ref.style.height, - ...position, - }); - }} - dragHandleClassName={ns('window-top-bar')} - className={ - workspace.focusedWindowId === window.id ? ns('workspace-focused-window') : null - } - > - <Window - window={window} - /> - </Rnd> - )) - } - </Rnd> + <div style={{ position: 'relative', width: '100%', height: '100%' }}> + <Rnd + default={{ + width: viewportPosition.width, + height: viewportPosition.height, + }} + position={{ + x: viewportPosition.x - offsetX, y: viewportPosition.y - offsetY, + }} + enableResizing={{ + top: false, + right: false, + bottom: false, + left: false, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false, + }} + onDragStop={(e, d) => { + setWorkspaceViewportPosition({ x: d.x + offsetX, y: d.y + offsetY }); + }} + cancel={`.${ns('window')}`} + className={ns('workspace')} + > + { + Object.values(windows).map(window => ( + <Rnd + key={window.id} + size={{ width: window.width, height: window.height }} + position={{ x: window.x + offsetX, y: window.y + offsetY }} + bounds="parent" + onDragStop={(e, d) => { + 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, + x: position.x - offsetX, + y: position.y - offsetY, + }); + }} + dragHandleClassName={ns('window-top-bar')} + className={ + workspace.focusedWindowId === window.id ? ns('workspace-focused-window') : null + } + > + <Window + window={window} + /> + </Rnd> + )) + } + </Rnd> + </div> ); } } diff --git a/src/state/actions/window.js b/src/state/actions/window.js index 770cc4643f423d5c5d16f6942aaad9dcba655ebb..2aaf858d9bb97d77c8d3100a89d385fc88955a93 100644 --- a/src/state/actions/window.js +++ b/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, diff --git a/src/state/reducers/workspace.js b/src/state/reducers/workspace.js index 6abaeb93abc2395bb2cf99343aa8cdaf5b67a3c2..2aed2d23fbbdcec81dc4e63ae5c56c9fb8a8cfaf 100644 --- a/src/state/reducers/workspace.js +++ b/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, },