From 5bddf62d54064e20db06cd26bfaa73b0ddf1d0e2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 23 Jan 2019 18:30:51 +0100 Subject: [PATCH] WIP to port prototype code --- src/resizer/distributors/roomsublist2.js | 280 +++++++++++++++++++++++ 1 file changed, 280 insertions(+) create mode 100644 src/resizer/distributors/roomsublist2.js diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js new file mode 100644 index 0000000000..c720152962 --- /dev/null +++ b/src/resizer/distributors/roomsublist2.js @@ -0,0 +1,280 @@ +/* +Copyright 2019 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +const allowWhitespace = true; +const blendOverflow = false; +const handleHeight = 1; + +function log(...params) { + // console.log.apply(console, params); +} + +function clamp(height, min, max) { + //log(`clamping ${height} between ${min} and ${max}`); + if (height > max) return max; + if (height < min) return min; + return height; +} + +export class Layout { + constructor(applyHeight, initialSizes, collapsedState) { + this._applyHeight = applyHeight; + this._sections = []; + this._collapsedState = collapsedState || {}; + this._availableHeight = 0; + // need to store heights by id so it doesn't get + // assigned to wrong section when a section gets added? + this._sectionHeights = initialSizes || {}; + this._originalHeights = []; + this._heights = []; + } + + setAvailableHeight(newSize) { + this._availableHeight = newSize; + // needs more work + this._applyNewSize(); + } + + setCollapsed(id, collapsed) { + this._collapsedState[id] = collapsed; + this._applyNewSize(); + } + // [{id, count}] + setSections(sections) { + this._sections = sections; + this._applyNewSize(); + } + + openHandle(id) { + return new Handle(this, this._getSectionIndex(id)); + } + + _getAvailableHeight() { + const nonCollapsedSectionCount = this._sections.reduce((count, section) => { + const collapsed = this._collapsedState[section.id]; + return count + (collapsed ? 0 : 1); + }); + return this._availableHeight - ((nonCollapsedSectionCount - 1) * handleHeight); + } + + _applyNewSize() { + const height = this._getAvailableHeight(); + const sectionHeights = this._sections.map((section) => { + return this._sectionHeight[section.id] || (height / this._sections.length); + }); + const totalRequestedHeight = sectionHeights.reduce((sum, h) => h + sum, 0); + const ratios = sectionHeights.map((h) => h / totalRequestedHeight); + this._originalHeights = ratios.map((r) => r * height); + this._heights = this._originalHeights.slice(0); + this._relayout(); + } + + _getSectionIndex(id) { + return this._sections.findIndex((s) => s.id === id); + } + + _getMaxHeight(i) { + const section = this._sections[i]; + const collapsed = this._collapsedState[section.id]; + + if (collapsed) { + return this._sectionHeight(0); + } else { + return this._sectionHeight(section.count); + } + } + + _sectionHeight(count) { + return 36 + (count === 0 ? 0 : 4 + (count * 34)); + } + + _getMinHeight(i) { + const section = this._sections[i]; + return this._sectionHeight(Math.min(section.count, 1)); + } + + _applyOverflow(overflow, sections) { + //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. + + let unclampedSections = []; + + let overflowPerSection = blendOverflow ? (overflow / sections.length) : overflow; + for (const i of sections) { + newHeight = clamp(this._heights[i] - overflow, this._getMinHeight(i), this._getMaxHeight(i)); + if (newHeight == this._heights[i] - overflow) { + unclampedSections.push(i); + } + overflow -= this._heights[i] - newHeight; + log(`heights[${i}] (${this._heights[i]}) - newHeight (${newHeight}) = ${this._heights[i] - newHeight}`); + + // log(`changing ${this._heights[i]} to ${newHeight}`); + this._heights[i] = newHeight; + + //log(`for section ${i} overflow is ${overflow}`); + + if (!blendOverflow) { + overflowPerSection = overflow; + if (Math.abs(overflow) < 1.0) break; + } + } + + 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); + } + + return overflow; + } + + _rebalanceAbove(overflowAbove) { + if (Math.abs(overflowAbove) > 1.0) { + log(`trying to rebalance upstream with ${overflowAbove}`); + let sections = []; + for (let i = anchor - 1; i >= 1; i--) { + sections.push(i); + } + overflowAbove = this._applyOverflow(overflowAbove, sections); + } + return overflowAbove; + } + + _rebalanceBelow(overflowBelow) { + if (Math.abs(overflowBelow) > 1.0) { + log(`trying to rebalance downstream with ${overflowBelow}`); + let 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; + } + + // @param offset the amount the anchor is moved from what is stored in _originalHeights, positive if downwards + // if we're clamped, return the offset we should be clamped at. + _relayout(anchor = 0, offset = 0, clamped = false) { + this._heights = this._originalHeights.slice(0); + // 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); + // 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 = (maxHeight - this._heights[anchor]) - offset; + overflowBelow = offset; + log(`pulling downwards clamped at max: ${overflowAbove} ${overflowBelow}`); + } + // new height < min? + else if (this._heights[anchor] + offset < minHeight) { + // 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); + + // 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(overflowAbove); + overflowBelow = this._rebalanceBelow(overflowBelow); + + 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; + } + + 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; + } + } + + // apply the heights + for (let i = 0; i < this._sections.length; i++) { + const section = this._sections[i]; + this._applyHeight(section.id, this._heights[i]); + // const roomSubList = document.getElementById(`roomSubList${i}`); + // roomSubList.style.height = `${heights[i]}px`; + } + + return undefined; + } + + _commitHeights() { + this._originalHeights = this._heights; + } +} + +class Handle { + constructor(layout, anchor) { + this._layout = layout; + this._anchor = anchor; + } + + setOffset(offset) { + this._layout._relayout(this._anchor, offset); + } + + finish() { + this._layout._commitHeights(); + } +} + +export class Distributor { + constructor(item, cfg) { + this._item = item; + this._layout = cfg.layout; + this._initialTop; + } + + start() { + this._handle = this._layout.openHandle(this._item.id); + this._initialTop = this._item.getOffset(); + } + + finish() { + this._handle.finish(); + } + + resize() { + // not supported + } + + resizeFromContainerOffset(containerOffset) { + const offset = containerOffset - this._initialTop; + this._handle.setOffset(offset); + } +}