normalize sizes when starting drag operation

res/css/structures/_RoomSubList.scss

@@ -33,13 +33,13 @@ limitations under the License.
 
 .mx_RoomSubList {
     min-height: 31px;
-    flex: 0 10000 content;
+    flex: 0 10000 auto;
     display: flex;
     flex-direction: column;
 }
 
 .mx_RoomSubList.resized-sized {
-    flex: 0 1 0;
+    flex: 0 1 auto;
 }
 
 .mx_RoomSubList_nonEmpty {

src/resizer/distributors.js

@@ -39,6 +39,10 @@ class FixedDistributor {
     resizeFromContainerOffset(offset) {
         this.resize(offset - this.beforeOffset);
     }
+
+    start() {}
+
+    finish() {}
 }
 
 

src/resizer/item.js

@@ -82,4 +82,23 @@ export default class ResizeItem {
             callback(null, this.id, this.domNode);
         }
     }
+
+
+    first() {
+        const firstHandle = Array.from(this.domNode.parentElement.children).find(el => {
+            return this.resizer.isResizeHandle(el);
+        });
+        if (firstHandle) {
+            return ResizeItem.fromResizeHandle(firstHandle, this.resizer, this.sizer);
+        }
+    }
+
+    last() {
+        const lastHandle = Array.from(this.domNode.parentElement.children).reverse().find(el => {
+            return this.resizer.isResizeHandle(el);
+        });
+        if (lastHandle) {
+            return ResizeItem.fromResizeHandle(lastHandle, this.resizer, this.sizer);
+        }
+    }
 }

src/resizer/resizer.js

@@ -107,6 +107,7 @@ export class Resizer {
         }
 
         const {sizer, distributor} = this._createSizerAndDistributor(resizeHandle);
+        distributor.start();
 
         const onMouseMove = (event) => {
             const offset = sizer.offsetFromEvent(event);
@@ -118,9 +119,11 @@ export class Resizer {
             if (this.classNames.resizing) {
                 this.container.classList.remove(this.classNames.resizing);
             }
+            distributor.finish();
             body.removeEventListener("mouseup", onMouseUp, false);
             body.removeEventListener("mousemove", onMouseMove, false);
         };
+        // TODO: listen for mouseout on document here as well
         body.addEventListener("mouseup", onMouseUp, false);
         body.addEventListener("mousemove", onMouseMove, false);
     }

src/resizer/room.js

@@ -18,7 +18,7 @@ import {Sizer} from "./sizer";
 
 class RoomSizer extends Sizer {
     setItemSize(item, size) {
-        item.style.flexBasis = `${Math.round(size)}px`;
+        item.style.maxHeight = `${Math.round(size)}px`;
         item.classList.add("resized-sized");
         // const total = this.getTotalSize();
         // const percent = size / total;
@@ -27,7 +27,7 @@ class RoomSizer extends Sizer {
     }
 
     clearItemSize(item) {
-        item.style.flexBasis = null;
+        item.style.maxHeight = null;
         item.classList.remove("resized-sized");
     }
 }
@@ -87,44 +87,15 @@ class RoomDistributor {
         return item.domNode.classList.contains("resized-sized");
     }
 
-    resize(size, interactive = false) {
+    resize(size) {
-        // console.log("*** starting resize session with size", size);
+        console.log("*** starting resize session with size", size);
-
-        // grow/shrink items after first?
-        // const itemSize = this.item.size();
-        // //
-        // if (size < itemSize) {
-        //     let nextItem = this.item.next();
-        //     while (nextItem)
-        // }
-
-        if (interactive) {
-            const nextItem = this.item.next();
-            if (nextItem) {
-                // let item = nextItem;
-                // let hasUnsizedProceedingItem = false;
-                // while (item) {
-                //     if (this._isSized(item)) {
-                //         hasUnsizedProceedingItem = true;
-                //         item = null;
-                //     } else {
-                //         item = item.next();
-                //     }
-                // }
-                // if (!hasUnsizedProceedingItem) {
-                    nextItem.clearSize();
-                // }
-            }
-        }
-
         let item = this.item;
         while (item) {
-            // TODO: collapsed
             if (this._isCollapsed(item)) {
                 item = item.previous();
             }
             else if (size <= MIN_SIZE) {
-                // console.log("  - resizing", item.id, "to min size", MIN_SIZE);
+                console.log("  - resizing", item.id, "to min size", MIN_SIZE);
                 item.setSize(MIN_SIZE);
                 const remainder = MIN_SIZE - size;
                 item = item.previous();
@@ -144,18 +115,33 @@ class RoomDistributor {
                     }
                 }
                 else {
-                    // console.log("  - resizing", item.id, "to size", size);
+                    console.log("  - resizing", item.id, "to size", size);
                     item.setSize(size);
                     item = null;
                     size = 0;
                 }
             }
         }
-        // console.log("*** ending resize session");
+        console.log("*** ending resize session");
     }
 
     resizeFromContainerOffset(containerOffset) {
-        this.resize(containerOffset - this.item.offset(), true);
+        this.resize(containerOffset - this.item.offset());
+    }
+
+    start() {
+        console.log("RoomDistributor::start: setting all items to their actual size in pixels");
+        let item = this.item.first();
+        while(item) {
+            if (!this._isCollapsed(item)) {
+                item.setSize(item.size());
+            }
+            item = item.next();
+        }
+    }
+
+    finish() {
+
     }
 }