Merge pull request #28 from cannoneyed/resize

More elegantly handle screens of varying widths
PAIR-code · Aug 5, 2019 · d27b65f · d27b65f
2 parents d31e654 + 7354943
commit d27b65f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/components/sequences.tsx b/src/components/sequences.tsx
@@ -116,7 +116,6 @@ export class Sequences extends React.Component<SequencesProps> {
       marginTop: 20,
       display: 'flex',
       flexDirection: 'column',
-      width: layout.sequencesWidth,
     });
 
     const showCandidateSequences = sequences.candidateSequences.length > 0;

diff --git a/src/core/constants.ts b/src/core/constants.ts
@@ -44,6 +44,9 @@ export const DEFAULT_NOTES = [
   [76, 8],
 ];
 
+export const DEFAULT_EDITOR_WIDTH = 1200;
+export const DEFAULT_SEQUENCES_WIDTH = 200;
+
 export const PIANO_ROLL_WIDTH = 24;
 export const NOTE_HEIGHT = 12;
 export const MASK_LANE_HEIGHT = 20;

diff --git a/src/core/layout.ts b/src/core/layout.ts
@@ -17,12 +17,30 @@ import { computed, observable } from 'mobx';
 
 import { editor } from './index';
 import {
+  DEFAULT_EDITOR_WIDTH,
+  DEFAULT_SEQUENCES_WIDTH,
   PIANO_ROLL_WIDTH,
   MASK_LANE_HEIGHT,
   TIMELINE_HEIGHT,
 } from './constants';
 
 class Layout {
+  constructor() {
+    window.onresize = () => this.handleResize();
+    this.handleResize();
+  }
+
+  handleResize() {
+    const { innerWidth, innerHeight } = window;
+    const defaultAppWidth = DEFAULT_EDITOR_WIDTH + DEFAULT_SEQUENCES_WIDTH;
+    const appWidth = Math.min(innerWidth, defaultAppWidth);
+
+    this.sequencesWidth = DEFAULT_SEQUENCES_WIDTH;
+    this.editorWidth = appWidth - this.sequencesWidth;
+
+    console.log({ innerWidth, appWidth, sequencesWidth: this.sequencesWidth });
+  }
+
   @observable editorWidth = 1200;
   @observable sequencesWidth = 200;
   @observable sequenceHeight = 80;