Fix editor view while expanding chat

stream-labs · gettinToasty · Dec 20, 2019 · Dec 4, 2019 · Dec 5, 2019 · Dec 6, 2019
commit 5dead29afa048e487851a1fdec2e88181a32a3e2
diff --git a/app/components/editor/layouts/Classic.tsx b/app/components/editor/layouts/Classic.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import TsxComponent, { createProps } from 'components/tsx-component';
-import { Component } from 'vue-property-decorator';
+import { Component, Watch } from 'vue-property-decorator';
 import ResizeBar from 'components/shared/ResizeBar.vue';
 import styles from './Layouts.m.less';
 import { LayoutProps } from './Default';
@@ -10,11 +10,21 @@ export default class Classic extends TsxComponent<LayoutProps> {
   mounted() {
     window.addEventListener('resize', () => this.props.windowResizeHandler(this.mins));
     this.props.windowResizeHandler(this.mins);
+    this.$emit('totalWidth', ['1', ['2', '3', '4']]);
   }
   destroyed() {
     window.removeEventListener('resize', () => this.props.windowResizeHandler(this.mins));
   }
 
+  get totalWidth() {
+    return this.props.elWidth;
+  }
+
+  @Watch('totalWidth')
+  updateSize() {
+    this.props.windowResizeHandler(this.mins);
+  }
+
   get mins() {
     return {
       bar1: this.props.calculateMin(['2', '3', '4']),

diff --git a/app/components/editor/layouts/Default.tsx b/app/components/editor/layouts/Default.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import TsxComponent, { createProps } from 'components/tsx-component';
-import { Component } from 'vue-property-decorator';
+import { Component, Watch } from 'vue-property-decorator';
 import ResizeBar from 'components/shared/ResizeBar.vue';
 import { LayoutSlot } from 'services/layout';
 import styles from './Layouts.m.less';
@@ -13,6 +13,7 @@ export class LayoutProps {
   setBarResize: (bar: 'bar1' | 'bar2', size: number, mins?: IResizeMins) => void = () => {};
   windowResizeHandler: (mins: IResizeMins) => void = () => {};
   resizes: { bar1: number; bar2: number } = null;
+  elWidth: number = 0;
 }
 
 // the minimums here represent the asbolute minimum of a viable component (minimized to invisibility)
@@ -28,11 +29,21 @@ export default class Default extends TsxComponent<LayoutProps> {
   mounted() {
     window.addEventListener('resize', () => this.props.windowResizeHandler(this.mins));
     this.props.windowResizeHandler(this.mins);
+    this.$emit('totalWidth', ['1', '2', ['3', '4', '5']]);
   }
   destroyed() {
     window.removeEventListener('resize', () => this.props.windowResizeHandler(this.mins));
   }
 
+  get totalWidth() {
+    return this.props.elWidth;
+  }
+
+  @Watch('totalWidth')
+  updateSize() {
+    this.props.windowResizeHandler(this.mins);
+  }
+
   get mins() {
     return {
       bar1: this.props.calculateMin(['2']),

diff --git a/app/components/editor/layouts/FourByFour.tsx b/app/components/editor/layouts/FourByFour.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import TsxComponent, { createProps } from 'components/tsx-component';
-import { Component } from 'vue-property-decorator';
+import { Component, Watch } from 'vue-property-decorator';
 import ResizeBar from 'components/shared/ResizeBar.vue';
 import styles from './Layouts.m.less';
 import { LayoutProps } from './Default';
@@ -10,11 +10,21 @@ export default class FourByFour extends TsxComponent<LayoutProps> {
   mounted() {
     window.addEventListener('resize', () => this.props.windowResizeHandler(this.mins));
     this.props.windowResizeHandler(this.mins);
+    this.$emit('totalWidth', ['1', ['2', '3'], ['4', '5']]);
   }
   destroyed() {
     window.removeEventListener('resize', () => this.props.windowResizeHandler(this.mins));
   }
 
+  get totalWidth() {
+    return this.props.elWidth;
+  }
+
+  @Watch('totalWidth')
+  updateSize() {
+    this.props.windowResizeHandler(this.mins);
+  }
+
   get mins() {
     return {
       bar1: this.props.calculateMin(['2', '3']),

diff --git a/app/components/editor/layouts/OnePane.tsx b/app/components/editor/layouts/OnePane.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import TsxComponent, { createProps } from 'components/tsx-component';
 import { LayoutProps } from './Default';
-import { Component } from 'vue-property-decorator';
+import { Component, Watch } from 'vue-property-decorator';
 import ResizeBar from 'components/shared/ResizeBar.vue';
 import styles from './Layouts.m.less';
 
@@ -10,11 +10,21 @@ export default class OnePane extends TsxComponent<LayoutProps> {
   mounted() {
     window.addEventListener('resize', () => this.props.windowResizeHandler(this.mins));
     this.props.windowResizeHandler(this.mins);
+    this.$emit('totalWidth', ['2', ['1', ['3', '4', '5']]]);
   }
   destroyed() {
     window.removeEventListener('resize', () => this.props.windowResizeHandler(this.mins));
   }
 
+  get totalWidth() {
+    return this.props.elWidth;
+  }
+
+  @Watch('totalWidth')
+  updateSize() {
+    this.props.windowResizeHandler(this.mins);
+  }
+
   get mins() {
     return {
       bar1: this.props.calculateMin(['1', ['3', '4', '5']]),

diff --git a/app/components/editor/layouts/Triplets.tsx b/app/components/editor/layouts/Triplets.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import TsxComponent, { createProps } from 'components/tsx-component';
 import { LayoutProps } from './Default';
-import { Component } from 'vue-property-decorator';
+import { Component, Watch } from 'vue-property-decorator';
 import ResizeBar from 'components/shared/ResizeBar.vue';
 import styles from './Layouts.m.less';
 
@@ -10,11 +10,21 @@ export default class Triplets extends TsxComponent<LayoutProps> {
   mounted() {
     window.addEventListener('resize', () => this.props.windowResizeHandler(this.mins));
     this.props.windowResizeHandler(this.mins);
+    this.$emit('totalWidth', [['1', '4'], ['2', '5'], ['3', '6']]);
   }
   destroyed() {
     window.removeEventListener('resize', () => this.props.windowResizeHandler(this.mins));
   }
 
+  get totalWidth() {
+    return this.props.elWidth;
+  }
+
+  @Watch('totalWidth')
+  updateSize() {
+    this.props.windowResizeHandler(this.mins);
+  }
+
   get mins() {
     return {
       bar1: this.props.calculateMin(['2', '5']),

diff --git a/app/components/editor/layouts/TwoPane.tsx b/app/components/editor/layouts/TwoPane.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import TsxComponent, { createProps } from 'components/tsx-component';
 import { LayoutProps } from './Default';
-import { Component } from 'vue-property-decorator';
+import { Component, Watch } from 'vue-property-decorator';
 import ResizeBar from 'components/shared/ResizeBar.vue';
 import styles from './Layouts.m.less';
 
@@ -10,11 +10,21 @@ export default class TwoPane extends TsxComponent<LayoutProps> {
   mounted() {
     window.addEventListener('resize', () => this.props.windowResizeHandler(this.mins));
     this.props.windowResizeHandler(this.mins);
+    this.$emit('totalWidth', ['2', '5', ['1', ['3', '4']]]);
   }
   destroyed() {
     window.removeEventListener('resize', () => this.props.windowResizeHandler(this.mins));
   }
 
+  get totalWidth() {
+    return this.props.elWidth;
+  }
+
+  @Watch('totalWidth')
+  updateSize() {
+    this.props.windowResizeHandler(this.mins);
+  }
+
   get mins() {
     return {
       bar1: this.props.calculateMin(['1', ['3', '4']]),

diff --git a/app/components/pages/Studio.tsx b/app/components/pages/Studio.tsx
@@ -53,6 +53,11 @@ export default class Studio extends TsxComponent {
     return this.layoutService.state.slottedElements;
   }
 
+  get elWidth() {
+    if (!this.$el) return 0;
+    return this.$el.getBoundingClientRect().width;
+  }
+
   windowResizeHandler(mins: IResizeMins) {
     // This is the maximum size we can use
     this.max = this.isColumns
@@ -92,8 +97,16 @@ export default class Studio extends TsxComponent {
     return this.layoutService.calculateMinimum(this.isColumns ? 'x' : 'y', slots);
   }
 
-  calculateMax(topEl: number) {
-    return this.max - topEl;
+  totalWidthHandler(slots: (LayoutSlot | LayoutSlot[])[]) {
+    if (this.isColumns) {
+      this.$emit('totalWidth', this.layoutService.calculateColumnTotal(slots));
+    } else {
+      this.$emit('totalWidth', this.layoutService.calculateMinimum('x', slots));
+    }
+  }
+
+  calculateMax(restMin: number) {
+    return this.max - restMin;
   }
 
   underMaxSize(max: number) {
@@ -127,6 +140,8 @@ export default class Studio extends TsxComponent {
         windowResizeHandler={(mins: IResizeMins) => this.windowResizeHandler(mins)}
         resizes={this.resizes}
         class="editor-page"
+        elWidth={this.elWidth}
+        onTotalWidth={(slots: (LayoutSlot | LayoutSlot[])[]) => this.totalWidthHandler(slots)}
       >
         {Object.keys(this.layoutService.state.slottedElements).map(widget => {
           const Element = COMPONENT_MAP[widget];

diff --git a/app/components/windows/Main.vue b/app/components/windows/Main.vue
@@ -26,7 +26,9 @@
         class="main-page-container"
         v-if="!showLoadingSpinner"
         :is="page"
-        :params="params"/>
+        :params="params"
+        @totalWidth="(width) => handleEditorWidth(width)"
+      />
       <studio-footer v-if="!applicationLoading && (page !== 'Onboarding')" />
     </div>
 

diff --git a/app/components/windows/Main.vue.ts b/app/components/windows/Main.vue.ts
@@ -77,6 +77,8 @@ export default class Main extends Vue {
     this.handleResize();
   }
 
+  minEditorWidth = 500;
+
   get title() {
     return this.windowsService.state.main.title;
   }
@@ -227,6 +229,9 @@ export default class Main extends Vue {
     clearTimeout(this.windowResizeTimeout);
 
     this.hasLiveDock = this.windowWidth >= 1070;
+    if (this.page === 'Studio') {
+      this.hasLiveDock = this.windowWidth >= this.minEditorWidth + 100;
+    }
     this.windowResizeTimeout = window.setTimeout(
       () => this.windowsService.updateStyleBlockers('main', false),
       200,
@@ -237,6 +242,10 @@ export default class Main extends Vue {
     this.compactView = this.$refs.mainMiddle.clientWidth < 1200;
   }
 
+  handleEditorWidth(width: number) {
+    this.minEditorWidth = width;
+  }
+
   onResizeStartHandler() {
     this.windowsService.updateStyleBlockers('main', true);
   }
@@ -255,9 +264,8 @@ export default class Main extends Vue {
 
   validateWidth(width: number): number {
     const appRect = this.$root.$el.getBoundingClientRect();
-    const minEditorWidth = 500;
     const minWidth = 290;
-    const maxWidth = Math.min(appRect.width - minEditorWidth, appRect.width / 2);
+    const maxWidth = Math.min(appRect.width - this.minEditorWidth, appRect.width / 2);
     let constrainedWidth = Math.max(minWidth, width);
     constrainedWidth = Math.min(maxWidth, width);
     return constrainedWidth;

diff --git a/app/services/layout.ts b/app/services/layout.ts
@@ -77,6 +77,22 @@ export class LayoutService extends PersistentStatefulService<ILayoutServiceState
     this.SET_SLOTS(slottedElements);
   }
 
+  calculateColumnTotal(slots: (LayoutSlot | LayoutSlot[])[]) {
+    let totalWidth = 0;
+    slots.forEach(slot => {
+      if (Array.isArray(slot)) {
+        totalWidth += this.calculateMinimum('x', slot);
+      } else {
+        const c = Object.keys(this.state.slottedElements).find(
+          comp => this.state.slottedElements[comp] === slot,
+        );
+        totalWidth += ELEMENT_MINS[c].x;
+      }
+    });
+
+    return totalWidth;
+  }
+
   calculateMinimum(orientation: 'x' | 'y', slots: (LayoutSlot | LayoutSlot[])[]) {
     const aggregateMins: number[] = [];
     const components: ELayoutElement[] = [];