Don't re-center windows when loading from serialized state

2026-07-25 19:13:54 +00:00 · 2018-09-30 21:54:02 -07:00 · 2018-09-30 21:54:02 -07:00 · d778c03f61
commit d778c03f61
parent 8253093a2b
24 changed files with 164 additions and 7 deletions
--- a/js/snapshots/serialization.test.ts.snap
+++ b/js/snapshots/serialization.test.ts.snap
@ -109,6 +109,7 @@ Object {
        ],
      },
    },
+    "positionsAreRelative": true,
  },
 }
 `;
--- a/js/tests/fixtures/serializedState/v1/balance.json
+++ b/js/tests/fixtures/serializedState/v1/balance.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/double-mode.json
+++ b/js/tests/fixtures/serializedState/v1/double-mode.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/equalizer-auto.json
+++ b/js/tests/fixtures/serializedState/v1/equalizer-auto.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/equalizer-band.json
+++ b/js/tests/fixtures/serializedState/v1/equalizer-band.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/equalizer-on.json
+++ b/js/tests/fixtures/serializedState/v1/equalizer-on.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/equalizer-preamp.json
+++ b/js/tests/fixtures/serializedState/v1/equalizer-preamp.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/focused-window.json
+++ b/js/tests/fixtures/serializedState/v1/focused-window.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/llama-mode.json
+++ b/js/tests/fixtures/serializedState/v1/llama-mode.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/main-window-position.json
+++ b/js/tests/fixtures/serializedState/v1/main-window-position.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/repeat.json
+++ b/js/tests/fixtures/serializedState/v1/repeat.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/shuffle.json
+++ b/js/tests/fixtures/serializedState/v1/shuffle.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/volume.json
+++ b/js/tests/fixtures/serializedState/v1/volume.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/window-hidden.json
+++ b/js/tests/fixtures/serializedState/v1/window-hidden.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/window-open.json
+++ b/js/tests/fixtures/serializedState/v1/window-open.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/window-positions-are-relative.json
+++ b/js/tests/fixtures/serializedState/v1/window-positions-are-relative.json
@ -0,0 +1,111 @@
+{
+    "version": 1,
+    "media": {
+        "volume": 78,
+        "balance": 0,
+        "shuffle": false,
+        "repeat": false
+    },
+    "equalizer": {
+        "on": true,
+        "auto": false,
+        "sliders": {
+            "60": 50,
+            "170": 50,
+            "310": 50,
+            "600": 50,
+            "1000": 50,
+            "3000": 50,
+            "6000": 50,
+            "12000": 50,
+            "14000": 50,
+            "16000": 50,
+            "preamp": 50
+        }
+    },
+    "display": {
+        "visualizerStyle": 0,
+        "doubled": false,
+        "llama": false,
+        "marqueeStep": 0,
+        "skinImages": {
+            "EQ_PREAMP_LINE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAABCAYAAADpXEERAAAAE0lEQVQoU2Pcdfruf4ZRMKRDAAD1lwNjTqcaUQAAAABJRU5ErkJggg==",
+            "EQ_GRAPH_LINE_COLORS": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAATCAYAAABRC2cZAAAAR0lEQVQYV2O4rCT9n+F9kOJ/hvfViv8ZHkzSQCE2afxneH/HEJm49Nr0PwOYWPLIAkp0PjL4z1B41uQ/Q9QGnf8MWrPEIAQANWYwvnlToNIAAAAASUVORK5CYII="
+        },
+        "skinCursors": null,
+        "skinRegion": {},
+        "skinGenLetterWidths": null,
+        "skinColors": [
+            "rgb(0,0,0)",
+            "rgb(24,33,41)",
+            "rgb(239,49,16)",
+            "rgb(206,41,16)",
+            "rgb(214,90,0)",
+            "rgb(214,102,0)",
+            "rgb(214,115,0)",
+            "rgb(198,123,8)",
+            "rgb(222,165,24)",
+            "rgb(214,181,33)",
+            "rgb(189,222,41)",
+            "rgb(148,222,33)",
+            "rgb(41,206,16)",
+            "rgb(50,190,16)",
+            "rgb(57,181,16)",
+            "rgb(49,156,8)",
+            "rgb(41,148,0)",
+            "rgb(24,132,8)",
+            "rgb(255,255,255)",
+            "rgb(214,214,222)",
+            "rgb(181,189,189)",
+            "rgb(160,170,175)",
+            "rgb(148,156,165)",
+            "rgb(150,150,150)"
+        ],
+        "skinPlaylistStyle": null
+    },
+    "windows": {
+        "positionsAreRelative": false,
+        "genWindows": {
+            "main": {
+                "size": [
+                    0,
+                    0
+                ],
+                "open": true,
+                "hidden": false,
+                "shade": false,
+                "position": {
+                    "x": 100,
+                    "y": 100
+                }
+            },
+            "equalizer": {
+                "size": [
+                    0,
+                    0
+                ],
+                "open": true,
+                "hidden": false,
+                "shade": false,
+                "position": {
+                    "x": 0,
+                    "y": 0
+                }
+            },
+            "playlist": {
+                "size": [
+                    0,
+                    0
+                ],
+                "open": true,
+                "hidden": false,
+                "shade": false,
+                "position": {
+                    "x": 0,
+                    "y": 0
+                }
+            }
+        },
+        "focused": "main"
+    }
+}
--- a/js/tests/fixtures/serializedState/v1/window-shade.json
+++ b/js/tests/fixtures/serializedState/v1/window-shade.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/tests/fixtures/serializedState/v1/window-size.json
+++ b/js/tests/fixtures/serializedState/v1/window-size.json
@ -64,6 +64,7 @@
        "skinPlaylistStyle": null
    },
    "windows": {
+        "positionsAreRelative": true,
        "genWindows": {
            "main": {
                "size": [
--- a/js/actionCreators/windows.ts
+++ b/js/actionCreators/windows.ts
@ -112,15 +112,21 @@ export function toggleWindow(windowId: WindowId): Dispatchable {
 }

 export function updateWindowPositions(
-  positions: WindowPositions
+  positions: WindowPositions,
+  absolute?: boolean
 ): Dispatchable {
-  return { type: UPDATE_WINDOW_POSITIONS, positions };
+  return { type: UPDATE_WINDOW_POSITIONS, positions, absolute };
 }

 export function centerWindowsInContainer(container: HTMLElement): Dispatchable {
-  const { left, top } = container.getBoundingClientRect();
-  const { scrollWidth: width, scrollHeight: height } = container;
-  return centerWindows({ left, top, width, height });
+  return (dispatch, getState) => {
+    if (!Selectors.getPositionsAreRelative(getState())) {
+      return;
+    }
+    const { left, top } = container.getBoundingClientRect();
+    const { scrollWidth: width, scrollHeight: height } = container;
+    dispatch(centerWindows({ left, top, width, height }));
+  };
 }

 export function centerWindowsInView(): Dispatchable {
@ -169,7 +175,7 @@ export function centerWindows(box: {
      {}
    );

-    dispatch(updateWindowPositions(newPositions));
+    dispatch(updateWindowPositions(newPositions, true));
  };
 }

--- a/js/reducers/windows.ts
+++ b/js/reducers/windows.ts
@ -50,10 +50,12 @@ export interface WindowsState {
  focused: string;
  genWindows: { [name: string]: WebampWindow };
  browserWindowSize: { height: number; width: number };
+  positionsAreRelative: boolean;
 }

 const defaultWindowsState: WindowsState = {
  focused: WINDOWS.MAIN,
+  positionsAreRelative: true,
  genWindows: {
    // TODO: Remove static capabilites and derive them from ids/generic
    main: {
@ -199,6 +201,8 @@ const windows = (
    case UPDATE_WINDOW_POSITIONS:
      return {
        ...state,
+        positionsAreRelative:
+          action.absolute === true ? false : state.positionsAreRelative,
        genWindows: Utils.objectMap(state.genWindows, (w, windowId) => {
          const newPosition = action.positions[windowId];
          if (newPosition == null) {
@ -217,9 +221,14 @@ const windows = (
        }))
      };
    case LOAD_SERIALIZED_STATE: {
-      const { genWindows, focused } = action.serializedState.windows;
+      const {
+        genWindows,
+        focused,
+        positionsAreRelative
+      } = action.serializedState.windows;
      return {
        ...state,
+        positionsAreRelative,
        genWindows: Utils.objectMap(state.genWindows, (w, windowId) => {
          const serializedW = genWindows[windowId];
          if (serializedW == null) {
@ -245,6 +254,7 @@ export function getSerializedState(
  state: WindowsState
 ): WindowsSerializedStateV1 {
  return {
+    positionsAreRelative: state.positionsAreRelative,
    genWindows: Utils.objectMap(state.genWindows, w => {
      return {
        size: w.size,
--- a/js/selectors.ts
+++ b/js/selectors.ts
@ -362,6 +362,10 @@ export function getWindowPosition(state: AppState) {
  return (windowId: WindowId) => state.windows.genWindows[windowId].position;
 }

+export function getPositionsAreRelative(state: AppState) {
+  return state.windows.positionsAreRelative;
+}
+
 export const getGenWindows = (state: AppState) => {
  return state.windows.genWindows;
 };
--- a/js/serialization.test.ts
+++ b/js/serialization.test.ts
@ -223,6 +223,13 @@ describe("can serialize", () => {
    expected: { x: 100, y: 100 }
  });

+  testSerialization({
+    name: "window positions are relative",
+    action: Actions.updateWindowPositions({ main: { x: 100, y: 100 } }, true),
+    selector: Selectors.getPositionsAreRelative,
+    expected: false
+  });
+
  testSerialization({
    name: "focused window",
    action: Actions.setFocusedWindow("equalizer"),
--- a/js/serializedStates/v1Types.ts
+++ b/js/serializedStates/v1Types.ts
@ -3,6 +3,7 @@
 */

 export interface WindowsSerializedStateV1 {
+  positionsAreRelative: boolean;
  genWindows: {
    [windowId: string]: {
      size: [number, number];
--- a/js/types.ts
+++ b/js/types.ts
@ -254,6 +254,7 @@ export type Action =
  | {
      type: "UPDATE_WINDOW_POSITIONS";
      positions: WindowPositions;
+      absolute?: boolean;
    }
  | {
      type: "CLICKED_TRACK";