Explorar o código

fix some sizing problems

Adam Shaw %!s(int64=7) %!d(string=hai) anos
pai
achega
5baf119ccb

+ 2 - 2
src/Calendar.ts

@@ -385,7 +385,7 @@ export default class Calendar {
     this.handleOptions(this.optionsManager.computed)
     this.handleOptions(this.optionsManager.computed)
 
 
     if (name === 'height' || name === 'contentHeight' || name === 'aspectRatio') {
     if (name === 'height' || name === 'contentHeight' || name === 'aspectRatio') {
-      this.updateSize()
+      this.resizeComponent()
     } else if (name === 'timeZone') {
     } else if (name === 'timeZone') {
       this.dispatch({
       this.dispatch({
         type: 'CHANGE_TIMEZONE',
         type: 'CHANGE_TIMEZONE',
@@ -718,7 +718,7 @@ export default class Calendar {
 
 
       let savedScroll = this.component.view.queryScroll()
       let savedScroll = this.component.view.queryScroll()
 
 
-      this.component.updateSize(true) // isResize=true
+      this.component.updateRootSize(true) // isResize=true
 
 
       savedScroll.isLocked = true // will prevent view from computing own values
       savedScroll.isLocked = true // will prevent view from computing own values
       this.component.view.applyScroll(savedScroll)
       this.component.view.applyScroll(savedScroll)

+ 10 - 16
src/CalendarComponent.ts

@@ -78,7 +78,6 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
 
 
     removeElement(this.contentEl)
     removeElement(this.contentEl)
     this.toggleElClassNames(false)
     this.toggleElClassNames(false)
-    this.clearHeightVars()
 
 
     super.destroy()
     super.destroy()
   }
   }
@@ -106,7 +105,7 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
     this.subrender('renderToolbars', [ props.viewSpec, props.dateProfile, props.dateProfileGenerator, title ])
     this.subrender('renderToolbars', [ props.viewSpec, props.dateProfile, props.dateProfileGenerator, title ])
     this.renderView(props, title)
     this.renderView(props, title)
 
 
-    this.updateSize()
+    this.updateRootSize()
     this.thawContentHeight()
     this.thawContentHeight()
     this.view.popScroll()
     this.view.popScroll()
   }
   }
@@ -196,18 +195,18 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
   // Sizing
   // Sizing
   // -----------------------------------------------------------------------------------------------------------------
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  updateSize(isResize = false) {
-    super.updateSize(isResize)
-
-    if (isResize) {
-      this.clearHeightVars()
-    }
-
-    if (this.isHeightAuto == null) {
+  updateRootSize(isResize = false) {
+    if (isResize || this.isHeightAuto == null) {
       this.computeHeightVars()
       this.computeHeightVars()
     }
     }
 
 
-    this.view.updateHeight(this.viewHeight, this.isHeightAuto, isResize)
+    this.updateSize(this.viewHeight, this.isHeightAuto, isResize)
+  }
+
+  updateSize(totalHeight, isAuto, isResize) {
+    super.updateSize(totalHeight, isAuto, isResize)
+
+    this.view.updateSize(this.viewHeight, this.isHeightAuto, isResize)
   }
   }
 
 
   computeHeightVars() {
   computeHeightVars() {
@@ -235,11 +234,6 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
     }
     }
   }
   }
 
 
-  clearHeightVars() {
-    this.isHeightAuto = null
-    this.viewHeight = null
-  }
-
   queryToolbarsHeight() {
   queryToolbarsHeight() {
     let height = 0
     let height = 0
 
 

+ 2 - 6
src/View.ts

@@ -249,13 +249,9 @@ export default abstract class View extends DateComponent {
   ------------------------------------------------------------------------------------------------------------------*/
   ------------------------------------------------------------------------------------------------------------------*/
 
 
 
 
-  updateHeight(totalHeight, isAuto, isResize) {
-    this.updateSize(isResize)
-  }
-
+  updateSize(totalHeight: number, isAuto: boolean, isResize: boolean) {
+    super.updateSize(totalHeight, isAuto, isResize)
 
 
-  updateSize(isResize) {
-    super.updateSize(isResize)
     this.updateNowIndicator()
     this.updateNowIndicator()
   }
   }
 
 

+ 17 - 17
src/agenda/AgendaView.ts

@@ -229,10 +229,19 @@ export default class AgendaView extends View {
   ------------------------------------------------------------------------------------------------------------------*/
   ------------------------------------------------------------------------------------------------------------------*/
 
 
 
 
-  // Adjusts the vertical dimensions of the view to the specified values
-  updateHeight(totalHeight, isAuto, isResize) {
-    super.updateHeight(totalHeight, isAuto, isResize)
+  updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
+    super.updateSize(viewHeight, isAuto, isResize) // will call updateBaseSize. important that executes first
+
+    this.timeGrid.updateSize(viewHeight, isAuto, isResize)
+
+    if (this.dayGrid) {
+      this.dayGrid.updateSize(viewHeight, isAuto, isResize)
+    }
+  }
+
 
 
+  // Adjusts the vertical dimensions of the view to the specified values
+  updateBaseSize(viewHeight, isAuto, isResize) {
     let eventLimit
     let eventLimit
     let scrollerHeight
     let scrollerHeight
     let scrollbarWidths
     let scrollbarWidths
@@ -244,7 +253,7 @@ export default class AgendaView extends View {
     // TODO: separate setting height from scroller VS timeGrid.
     // TODO: separate setting height from scroller VS timeGrid.
     if (!this.timeGrid.colEls) {
     if (!this.timeGrid.colEls) {
       if (!isAuto) {
       if (!isAuto) {
-        scrollerHeight = this.computeScrollerHeight(totalHeight)
+        scrollerHeight = this.computeScrollerHeight(viewHeight)
         this.scroller.setHeight(scrollerHeight)
         this.scroller.setHeight(scrollerHeight)
       }
       }
       return
       return
@@ -275,7 +284,7 @@ export default class AgendaView extends View {
 
 
     if (!isAuto) { // should we force dimensions of the scroll container?
     if (!isAuto) { // should we force dimensions of the scroll container?
 
 
-      scrollerHeight = this.computeScrollerHeight(totalHeight)
+      scrollerHeight = this.computeScrollerHeight(viewHeight)
       this.scroller.setHeight(scrollerHeight)
       this.scroller.setHeight(scrollerHeight)
       scrollbarWidths = this.scroller.getScrollbarWidths()
       scrollbarWidths = this.scroller.getScrollbarWidths()
 
 
@@ -288,7 +297,7 @@ export default class AgendaView extends View {
 
 
         // the scrollbar compensation might have changed text flow, which might affect height, so recalculate
         // the scrollbar compensation might have changed text flow, which might affect height, so recalculate
         // and reapply the desired height to the scroller.
         // and reapply the desired height to the scroller.
-        scrollerHeight = this.computeScrollerHeight(totalHeight)
+        scrollerHeight = this.computeScrollerHeight(viewHeight)
         this.scroller.setHeight(scrollerHeight)
         this.scroller.setHeight(scrollerHeight)
       }
       }
 
 
@@ -304,18 +313,9 @@ export default class AgendaView extends View {
   }
   }
 
 
 
 
-  updateSize(isResize: boolean) {
-    this.timeGrid.updateSize(isResize)
-
-    if (this.dayGrid) {
-      this.dayGrid.updateSize(isResize)
-    }
-  }
-
-
   // given a desired total height of the view, returns what the height of the scroller should be
   // given a desired total height of the view, returns what the height of the scroller should be
-  computeScrollerHeight(totalHeight) {
-    return totalHeight -
+  computeScrollerHeight(viewHeight) {
+    return viewHeight -
       subtractInnerElHeight(this.el, this.scroller.el) // everything that's NOT the scroller
       subtractInnerElHeight(this.el, this.scroller.el) // everything that's NOT the scroller
   }
   }
 
 

+ 14 - 14
src/basic/BasicView.ts

@@ -150,10 +150,15 @@ export default class BasicView extends View {
   ------------------------------------------------------------------------------------------------------------------*/
   ------------------------------------------------------------------------------------------------------------------*/
 
 
 
 
-  // Refreshes the horizontal dimensions of the view
-  updateHeight(totalHeight, isAuto, isResize) {
-    super.updateHeight(totalHeight, isAuto, isResize)
+  updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
+    super.updateSize(viewHeight, isAuto, isResize) // will call updateBaseSize. important that executes first
+
+    this.dayGrid.updateSize(viewHeight, isAuto, isResize)
+  }
+
 
 
+  // Refreshes the horizontal dimensions of the view
+  updateBaseSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
     let { dayGrid } = this
     let { dayGrid } = this
     let eventLimit = this.opt('eventLimit')
     let eventLimit = this.opt('eventLimit')
     let headRowEl =
     let headRowEl =
@@ -167,7 +172,7 @@ export default class BasicView extends View {
     // TODO: separate setting height from scroller VS dayGrid.
     // TODO: separate setting height from scroller VS dayGrid.
     if (!dayGrid.rowEls) {
     if (!dayGrid.rowEls) {
       if (!isAuto) {
       if (!isAuto) {
-        scrollerHeight = this.computeScrollerHeight(totalHeight)
+        scrollerHeight = this.computeScrollerHeight(viewHeight)
         this.scroller.setHeight(scrollerHeight)
         this.scroller.setHeight(scrollerHeight)
       }
       }
       return
       return
@@ -195,8 +200,8 @@ export default class BasicView extends View {
     }
     }
 
 
     // distribute the height to the rows
     // distribute the height to the rows
-    // (totalHeight is a "recommended" value if isAuto)
-    scrollerHeight = this.computeScrollerHeight(totalHeight)
+    // (viewHeight is a "recommended" value if isAuto)
+    scrollerHeight = this.computeScrollerHeight(viewHeight)
     this.setGridHeight(scrollerHeight, isAuto)
     this.setGridHeight(scrollerHeight, isAuto)
 
 
     // is the event limit dynamically calculated?
     // is the event limit dynamically calculated?
@@ -216,7 +221,7 @@ export default class BasicView extends View {
         }
         }
 
 
         // doing the scrollbar compensation might have created text overflow which created more height. redo
         // doing the scrollbar compensation might have created text overflow which created more height. redo
-        scrollerHeight = this.computeScrollerHeight(totalHeight)
+        scrollerHeight = this.computeScrollerHeight(viewHeight)
         this.scroller.setHeight(scrollerHeight)
         this.scroller.setHeight(scrollerHeight)
       }
       }
 
 
@@ -226,14 +231,9 @@ export default class BasicView extends View {
   }
   }
 
 
 
 
-  updateSize(isResize: boolean) {
-    this.dayGrid.updateSize(isResize)
-  }
-
-
   // given a desired total height of the view, returns what the height of the scroller should be
   // given a desired total height of the view, returns what the height of the scroller should be
-  computeScrollerHeight(totalHeight) {
-    return totalHeight -
+  computeScrollerHeight(viewHeight) {
+    return viewHeight -
       subtractInnerElHeight(this.el, this.scroller.el) // everything that's NOT the scroller
       subtractInnerElHeight(this.el, this.scroller.el) // everything that's NOT the scroller
   }
   }
 
 

+ 1 - 1
src/component/Component.ts

@@ -97,7 +97,7 @@ export default class Component<PropsType> {
   }
   }
 
 
   // when isResize is true, causes all subrenders to have sizes updated
   // when isResize is true, causes all subrenders to have sizes updated
-  updateSize(isResize: boolean = false) {
+  updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
     let methodNames = isResize ? this.sizeMethodNames : this.dirtySizeMethodNames
     let methodNames = isResize ? this.sizeMethodNames : this.dirtySizeMethodNames
 
 
     methodNames.forEach((sizeMethodName) => {
     methodNames.forEach((sizeMethodName) => {

+ 3 - 3
src/component/DateComponent.ts

@@ -114,13 +114,13 @@ export default class DateComponent extends Component<DateComponentProps> {
     this.subrender('renderEventResizeState', [ props.eventResize, dateId ], 'unrenderEventResizeState', true)
     this.subrender('renderEventResizeState', [ props.eventResize, dateId ], 'unrenderEventResizeState', true)
   }
   }
 
 
-  updateSize(isResize: boolean = false) {
+  updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
     let map = this.dirtySizeMethodNames
     let map = this.dirtySizeMethodNames
 
 
     if (isResize || map.has('afterSkeletonRender') || map.has('_renderDates') || map.has('renderEvents')) {
     if (isResize || map.has('afterSkeletonRender') || map.has('_renderDates') || map.has('renderEvents')) {
       // sort of the catch-all sizing
       // sort of the catch-all sizing
       // anything that might cause dimension changes
       // anything that might cause dimension changes
-      this.updateBaseSize()
+      this.updateBaseSize(viewHeight, isAuto, isResize)
       this.buildPositionCaches()
       this.buildPositionCaches()
     }
     }
 
 
@@ -153,7 +153,7 @@ export default class DateComponent extends Component<DateComponentProps> {
     this.dirtySizeMethodNames = new Map()
     this.dirtySizeMethodNames = new Map()
   }
   }
 
 
-  updateBaseSize() {
+  updateBaseSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
   }
   }
 
 
   buildPositionCaches() {
   buildPositionCaches() {

+ 2 - 2
src/list/ListView.ts

@@ -48,8 +48,8 @@ export default class ListView extends View {
   }
   }
 
 
 
 
-  updateHeight(totalHeight, isAuto, isResize) {
-    super.updateHeight(totalHeight, isAuto, isResize)
+  updateSize(totalHeight, isAuto, isResize) {
+    super.updateSize(totalHeight, isAuto, isResize)
 
 
     this.scroller.clear() // sets height to 'auto' and clears overflow
     this.scroller.clear() // sets height to 'auto' and clears overflow