From 9259650fa0f3029a06d35aa88529edae185ea4f8 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Thu, 14 Mar 2019 10:52:49 -0700
Subject: [PATCH] Reconcile window + workspace position coordinate systems in
our state
---
__tests__/src/actions/window.test.js | 4 +-
.../src/components/WorkspaceElastic.test.js | 18 +--
src/components/WorkspaceElastic.js | 112 ++++++++++--------
src/state/actions/window.js | 4 +-
src/state/reducers/workspace.js | 6 +-
5 files changed, 80 insertions(+), 64 deletions(-)
diff --git a/__tests__/src/actions/window.test.js b/__tests__/src/actions/window.test.js
index e56f8a5dd..89889961e 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 c25985fb7..a4c0b6dd9 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 0f1baee72..13eb84377 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 770cc4643..2aaf858d9 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 6abaeb93a..2aed2d23f 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,
},
--
GitLab