From 14485b60bebeda1f98c7143fa78a463d60fb24b7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:00:28 +0100 Subject: [PATCH 1/8] assign default height after assigning new sections also apply it to sections with value null --- src/resizer/distributors/roomsublist2.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index 5d291e1516..8e9112ebb3 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -63,9 +63,10 @@ export class Layout { if (Number.isFinite(availableHeight)) { this._availableHeight = availableHeight; } + this._sections = sections; const totalHeight = this._getAvailableHeight(); this._sections.forEach((section, i) => { - if (!this._sectionHeights.hasOwnProperty(section.id)) { + if (!this._sectionHeights[section.id]) { this._sectionHeights[section.id] = clamp( totalHeight / this._sections.length, this._getMinHeight(i), @@ -73,7 +74,6 @@ export class Layout { ); } }); - this._sections = sections; this._applyNewSize(); } From d56f77debeb3697196b9389a6f6d45335e489d7e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:02:56 +0100 Subject: [PATCH 2/8] ignore updates that don't change anything --- src/resizer/distributors/roomsublist2.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index 8e9112ebb3..96ce96d4ff 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -58,11 +58,25 @@ export class Layout { this._applyNewSize(); } - // [{id, count}] update(sections, availableHeight) { - if (Number.isFinite(availableHeight)) { + let heightChanged = false; + + if (Number.isFinite(availableHeight) && availableHeight !== this._availableHeight) { + heightChanged = true; this._availableHeight = availableHeight; } + + const sectionsChanged = + sections.length !== this._sections.length || + sections.some((a, i) => { + const b = this._sections[i]; + return a.id !== b.id || a.count !== b.count; + }); + + if (!heightChanged && !sectionsChanged) { + return; + } + this._sections = sections; const totalHeight = this._getAvailableHeight(); this._sections.forEach((section, i) => { From 87720bac2e1d8032f75839fcd8e1cdd9443382da Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:03:08 +0100 Subject: [PATCH 3/8] add comments to fields --- src/resizer/distributors/roomsublist2.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index 96ce96d4ff..87e2473078 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -31,9 +31,15 @@ function clamp(height, min, max) { export class Layout { constructor(applyHeight, initialSizes, collapsedState) { + // callback to set height of section this._applyHeight = applyHeight; + // list of {id, count} objects, + // determines sections and order of them this._sections = []; + // stores collapsed by id this._collapsedState = Object.assign({}, collapsedState); + // total available height to the layout + // (including resize handles, ...) this._availableHeight = 0; // heights stored by section section id this._sectionHeights = Object.assign({}, initialSizes); From 79a44b1bfb3e7d6e2b7e722abe7fb17260b71fc2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:03:49 +0100 Subject: [PATCH 4/8] always hide overflow on RoomList in case Layout screws up --- res/css/views/rooms/_RoomList.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 360966a952..886f10dc4c 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -19,9 +19,11 @@ limitations under the License. /* take up remaining space below TopLeftMenu */ flex: 1; min-height: 0; + overflow-y: hidden; } .mx_RoomList .mx_ResizeHandle { + // needed so the z-index takes effect position: relative; } From dab1f30ab4f36cfb4a2e065b0271c86c9a197427 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:08:38 +0100 Subject: [PATCH 5/8] remove obsolete logging and comments --- src/resizer/distributors/roomsublist2.js | 23 +---------------------- 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index 87e2473078..c9436c5e2f 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -19,11 +19,7 @@ import FixedDistributor from "./fixed"; // const allowWhitespace = true; const handleHeight = 1; -function log() { -} - function clamp(height, min, max) { - //log(`clamping ${height} between ${min} and ${max}`); if (height > max) return max; if (height < min) return min; return height; @@ -99,7 +95,6 @@ export class Layout { openHandle(id) { const index = this._getSectionIndex(id); - //log(`openHandle resolved ${id} to ${index}`); return new Handle(this, index, this._sectionHeights[id]); } @@ -148,12 +143,10 @@ export class Layout { const section = this._sections[i]; const collapsed = this._collapsedState[section.id]; const maxItems = collapsed ? 0 : 1; - // log("_getMinHeight", i, section); return this._sectionHeight(Math.min(section.count, maxItems)); } _applyOverflow(overflow, sections, blend) { - //log("applyOverflow", overflow, sections); // take the given overflow amount, and applies it to the given sections. // calls itself recursively until it has distributed all the overflow // or run out of unclamped sections. @@ -175,10 +168,7 @@ export class Layout { // 100 -= -100 // 200 overflow -= this._heights[i] - newHeight; - // console.log(`this._heights[${i}] (${this._heights[i]}) - newHeight (${newHeight}) = ${this._heights[i] - newHeight}`); - // console.log(`changing ${this._heights[i]} to ${newHeight}`); this._heights[i] = newHeight; - // console.log(`for section ${i} overflow is ${overflow}`); if (!blend) { overflowPerSection = overflow; if (Math.abs(overflow) < 1.0) break; @@ -187,7 +177,6 @@ export class Layout { if (Math.abs(overflow) > 1.0 && unclampedSections.length > 0) { // we weren't able to distribute all the overflow so recurse and try again - // log("recursing with", overflow, unclampedSections); overflow = this._applyOverflow(overflow, unclampedSections, blend); } @@ -196,7 +185,6 @@ export class Layout { _rebalanceAbove(anchor, overflowAbove) { if (Math.abs(overflowAbove) > 1.0) { - // log(`trying to rebalance upstream with ${overflowAbove}`); const sections = []; for (let i = anchor - 1; i >= 0; i--) { sections.push(i); @@ -208,13 +196,11 @@ export class Layout { _rebalanceBelow(anchor, overflowBelow) { if (Math.abs(overflowBelow) > 1.0) { - // log(`trying to rebalance downstream with ${overflowBelow}`); const sections = []; for (let i = anchor + 1; i < this._sections.length; i++) { sections.push(i); } overflowBelow = this._applyOverflow(overflowBelow, sections); - //log(`rebalanced downstream with ${overflowBelow}`); } return overflowBelow; } @@ -231,20 +217,16 @@ export class Layout { // new height > max ? if (this._heights[anchor] + offset > maxHeight) { // we're pulling downwards and clamped - // overflowAbove = minus how much are we above max height? + // overflowAbove = minus how much are we above max height overflowAbove = (maxHeight - this._heights[anchor]) - offset; overflowBelow = offset; - // log(`pulling downwards clamped at max: ${overflowAbove} ${overflowBelow}`); } else if (this._heights[anchor] + offset < minHeight) { // new height < min? // we're pulling upwards and clamped - // overflowAbove = ??? (offset is negative here, so - offset will add) overflowAbove = (minHeight - this._heights[anchor]) - offset; overflowBelow = offset; - // log(`pulling upwards clamped at min: ${overflowAbove} ${overflowBelow}`); } else { overflowAbove = 0; overflowBelow = offset; - // log(`resizing the anchor: ${overflowAbove} ${overflowBelow}`); } this._heights[anchor] = clamp(this._heights[anchor] + offset, minHeight, maxHeight); @@ -256,7 +238,6 @@ export class Layout { if (!clamped) { // to avoid risk of infinite recursion // clamp to avoid overflowing or underflowing the page if (Math.abs(overflowAbove) > 1.0) { - // log(`clamping with overflowAbove ${overflowAbove}`); // here we do the layout again with offset - the amount of space we took too much this._relayout(anchor, offset + overflowAbove, true); return offset + overflowAbove; @@ -264,7 +245,6 @@ export class Layout { if (Math.abs(overflowBelow) > 1.0) { // here we do the layout again with offset - the amount of space we took too much - // log(`clamping with overflowBelow ${overflowBelow}`); this._relayout(anchor, offset - overflowBelow, true); return offset - overflowBelow; } @@ -275,7 +255,6 @@ export class Layout { } _applyHeights() { - log("updating layout, heights are now", this._heights); // apply the heights for (let i = 0; i < this._sections.length; i++) { const section = this._sections[i]; From 6e55ebdab7794fbbb054dd777fad8d28ac567f8f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:10:50 +0100 Subject: [PATCH 6/8] better naming for anchor --- src/resizer/distributors/roomsublist2.js | 40 ++++++++++++------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index c9436c5e2f..3888396a97 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -183,10 +183,10 @@ export class Layout { return overflow; } - _rebalanceAbove(anchor, overflowAbove) { + _rebalanceAbove(sectionIndex, overflowAbove) { if (Math.abs(overflowAbove) > 1.0) { const sections = []; - for (let i = anchor - 1; i >= 0; i--) { + for (let i = sectionIndex - 1; i >= 0; i--) { sections.push(i); } overflowAbove = this._applyOverflow(overflowAbove, sections); @@ -194,10 +194,10 @@ export class Layout { return overflowAbove; } - _rebalanceBelow(anchor, overflowBelow) { + _rebalanceBelow(sectionIndex, overflowBelow) { if (Math.abs(overflowBelow) > 1.0) { const sections = []; - for (let i = anchor + 1; i < this._sections.length; i++) { + for (let i = sectionIndex + 1; i < this._sections.length; i++) { sections.push(i); } overflowBelow = this._applyOverflow(overflowBelow, sections); @@ -205,47 +205,47 @@ export class Layout { return overflowBelow; } - // @param offset the amount the anchor is moved from what is stored in _sectionHeights, positive if downwards + // @param offset the amount the sectionIndex is moved from what is stored in _sectionHeights, positive if downwards // if we're clamped, return the offset we should be clamped at. - _relayout(anchor = 0, offset = 0, clamped = false) { + _relayout(sectionIndex = 0, offset = 0, clamped = false) { this._heights = this._sections.map((section) => this._sectionHeights[section.id]); // are these the amounts the items above/below shrank/grew and need to be relayouted? let overflowAbove; let overflowBelow; - const maxHeight = this._getMaxHeight(anchor); - const minHeight = this._getMinHeight(anchor); + const maxHeight = this._getMaxHeight(sectionIndex); + const minHeight = this._getMinHeight(sectionIndex); // new height > max ? - if (this._heights[anchor] + offset > maxHeight) { + if (this._heights[sectionIndex] + offset > maxHeight) { // we're pulling downwards and clamped // overflowAbove = minus how much are we above max height - overflowAbove = (maxHeight - this._heights[anchor]) - offset; + overflowAbove = (maxHeight - this._heights[sectionIndex]) - offset; overflowBelow = offset; - } else if (this._heights[anchor] + offset < minHeight) { // new height < min? + } else if (this._heights[sectionIndex] + offset < minHeight) { // new height < min? // we're pulling upwards and clamped - overflowAbove = (minHeight - this._heights[anchor]) - offset; + overflowAbove = (minHeight - this._heights[sectionIndex]) - offset; overflowBelow = offset; } else { overflowAbove = 0; overflowBelow = offset; } - this._heights[anchor] = clamp(this._heights[anchor] + offset, minHeight, maxHeight); + this._heights[sectionIndex] = clamp(this._heights[sectionIndex] + offset, minHeight, maxHeight); // these are reassigned the amount of overflow that could not be rebalanced // meaning we dragged the handle too far and it can't follow the cursor anymore - overflowAbove = this._rebalanceAbove(anchor, overflowAbove); - overflowBelow = this._rebalanceBelow(anchor, overflowBelow); + overflowAbove = this._rebalanceAbove(sectionIndex, overflowAbove); + overflowBelow = this._rebalanceBelow(sectionIndex, overflowBelow); if (!clamped) { // to avoid risk of infinite recursion // clamp to avoid overflowing or underflowing the page if (Math.abs(overflowAbove) > 1.0) { // here we do the layout again with offset - the amount of space we took too much - this._relayout(anchor, offset + overflowAbove, true); + this._relayout(sectionIndex, offset + overflowAbove, true); return offset + overflowAbove; } if (Math.abs(overflowBelow) > 1.0) { // here we do the layout again with offset - the amount of space we took too much - this._relayout(anchor, offset - overflowBelow, true); + this._relayout(sectionIndex, offset - overflowBelow, true); return offset - overflowBelow; } } @@ -270,14 +270,14 @@ export class Layout { } class Handle { - constructor(layout, anchor, height) { + constructor(layout, sectionIndex, height) { this._layout = layout; - this._anchor = anchor; + this._sectionIndex = sectionIndex; this._initialHeight = height; } setHeight(height) { - this._layout._relayout(this._anchor, height - this._initialHeight); + this._layout._relayout(this._sectionIndex, height - this._initialHeight); return this; } From d833174d68460934f1cf5acf5d95501b274f1f57 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:29:34 +0100 Subject: [PATCH 7/8] floor default section height --- src/resizer/distributors/roomsublist2.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index 3888396a97..bd74cf1080 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -81,10 +81,11 @@ export class Layout { this._sections = sections; const totalHeight = this._getAvailableHeight(); + const defaultHeight = Math.floor(totalHeight / this._sections.length); this._sections.forEach((section, i) => { if (!this._sectionHeights[section.id]) { this._sectionHeights[section.id] = clamp( - totalHeight / this._sections.length, + defaultHeight, this._getMinHeight(i), this._getMaxHeight(i), ); From b0bb4eb5ab9776996a11f03bd39904c8d73d95e9 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 28 Jan 2019 16:30:34 +0100 Subject: [PATCH 8/8] better naming --- src/resizer/distributors/roomsublist2.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index bd74cf1080..d6bf8d6c7a 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -207,8 +207,8 @@ export class Layout { } // @param offset the amount the sectionIndex is moved from what is stored in _sectionHeights, positive if downwards - // if we're clamped, return the offset we should be clamped at. - _relayout(sectionIndex = 0, offset = 0, clamped = false) { + // if we're constrained, return the offset we should be constrained at. + _relayout(sectionIndex = 0, offset = 0, constrained = false) { this._heights = this._sections.map((section) => this._sectionHeights[section.id]); // are these the amounts the items above/below shrank/grew and need to be relayouted? let overflowAbove; @@ -217,12 +217,12 @@ export class Layout { const minHeight = this._getMinHeight(sectionIndex); // new height > max ? if (this._heights[sectionIndex] + offset > maxHeight) { - // we're pulling downwards and clamped + // we're pulling downwards and constrained // overflowAbove = minus how much are we above max height overflowAbove = (maxHeight - this._heights[sectionIndex]) - offset; overflowBelow = offset; } else if (this._heights[sectionIndex] + offset < minHeight) { // new height < min? - // we're pulling upwards and clamped + // we're pulling upwards and constrained overflowAbove = (minHeight - this._heights[sectionIndex]) - offset; overflowBelow = offset; } else { @@ -236,7 +236,7 @@ export class Layout { overflowAbove = this._rebalanceAbove(sectionIndex, overflowAbove); overflowBelow = this._rebalanceBelow(sectionIndex, overflowBelow); - if (!clamped) { // to avoid risk of infinite recursion + if (!constrained) { // to avoid risk of infinite recursion // clamp to avoid overflowing or underflowing the page if (Math.abs(overflowAbove) > 1.0) { // here we do the layout again with offset - the amount of space we took too much