support programmatic access to a distributor (to set size from storage)

src/resizer/distributors.js

@@ -11,7 +11,8 @@ class FixedDistributor {
         return itemSize;
     }
 
-    finish(_offset) {
+    sizeFromOffset(offset) {
+        return offset - this.beforeOffset;
     }
 }
 
@@ -24,7 +25,7 @@ class CollapseDistributor extends FixedDistributor {
     }
 
     resize(offset) {
-        let newSize = offset - this.sizer.getItemOffset(this.item);
+        let newSize = this.sizeFromOffset(offset);
         if (newSize < this.toggleSize) {
             this.item.classList.add("collapsed");
             if (this.onCollapsed) {
@@ -37,7 +38,7 @@ class CollapseDistributor extends FixedDistributor {
                 this.onCollapsed(false, this.item);
             }
         }
-        super.resize(newSize);
+        super.resize(offset);
     }
 }
 
@@ -75,10 +76,6 @@ class PercentageDistributor {
         });
     }
 
-    finish(_offset) {
-
-    }
-
     static _getPercentages(sizer, items) {
         const percentages = items.map(i => sizer.getItemPercentage(i));
         const setPercentages = percentages.filter(p => p !== null);

src/resizer/resizer.js

@@ -39,6 +39,13 @@ export class Resizer {
         this.container.removeEventListener("mousedown", this.mouseDownHandler, false);
     }
 
+    forHandleAt(handleIndex) {
+        const handles = this._getResizeHandles();
+        const handle = handles[handleIndex];
+        const {distributor} = this._createSizerAndDistributor(handle);
+        return distributor;
+    }
+
     _isResizeHandle(el) {
         return el && el.classList.contains(this.classNames.handle);
     }
@@ -55,20 +62,7 @@ export class Resizer {
             this.container.classList.add(this.classNames.resizing);
         }
 
-        const resizeHandle = event.target;
+        const {sizer, distributor} = this._createSizerAndDistributor(target);
-        const vertical = resizeHandle.classList.contains(this.classNames.vertical);
-        const reverse = resizeHandle.classList.contains(this.classNames.reverse);
-
-        const sizer = new this.sizerCtor(this.container, vertical, reverse);
-
-        const items = this._getResizableItems();
-        const prevItem = resizeHandle.previousElementSibling;
-        // if reverse, resize the item after the handle, so + 1
-        const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0);
-        const item = items[itemIndex];
-        const distributor = new this.distributorCtor(
-            sizer, item, this.distributorCfg,
-            items, this.container);
 
         const onMouseMove = (event) => {
             const offset = sizer.offsetFromEvent(event);
@@ -80,8 +74,6 @@ export class Resizer {
             if (this.classNames.resizing) {
                 this.container.classList.remove(this.classNames.resizing);
             }
-            const offset = sizer.offsetFromEvent(event);
-            distributor.finish(offset);
             body.removeEventListener("mouseup", onMouseUp, false);
             body.removeEventListener("mousemove", onMouseMove, false);
         };
@@ -89,6 +81,23 @@ export class Resizer {
         body.addEventListener("mousemove", onMouseMove, false);
     }
 
+    _createSizerAndDistributor(resizeHandle) {
+        const vertical = resizeHandle.classList.contains(this.classNames.vertical);
+        const reverse = resizeHandle.classList.contains(this.classNames.reverse);
+
+        const sizer = new this.sizerCtor(this.container, vertical, reverse);
+
+        const items = this._getResizableItems();
+        const prevItem = resizeHandle.previousElementSibling;
+        // if reverse, resize the item after the handle instead of before, so + 1
+        const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0);
+        const item = items[itemIndex];
+        const distributor = new this.distributorCtor(
+            sizer, item, this.distributorCfg,
+            items, this.container);
+        return {sizer, distributor};
+    }
+
     _getResizableItems() {
         return Array.from(this.container.children).filter(el => {
             return !this._isResizeHandle(el) && (
@@ -96,4 +105,10 @@ export class Resizer {
                 this._isResizeHandle(el.nextElementSibling));
         });
     }
+
+    _getResizeHandles() {
+        return Array.from(this.container.children).filter(el => {
+            return this._isResizeHandle(el);
+        });
+    }
 }