Iterate the resizer

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/resizer/distributors/fixed.ts

@@ -39,10 +39,18 @@ export default class FixedDistributor<C extends IConfig, I extends ResizeItem<an
 
     private readonly beforeOffset: number;
 
-    constructor(protected item: I) {
+    constructor(public readonly item: I) {
         this.beforeOffset = item.offset();
     }
 
+    public get size() {
+        return this.item.getSize();
+    }
+
+    public set size(size: string) {
+        this.item.setRawSize(size);
+    }
+
     public resize(size: number) {
         this.item.setSize(size);
     }

src/resizer/distributors/percentage.ts

@@ -29,6 +29,7 @@ class PercentageSizer extends Sizer {
 
     public finish(item: HTMLElement) {
         const parent = item.offsetParent as HTMLElement;
+        if (!parent) return;
         if (this.vertical) {
             const p = ((item.offsetHeight / parent.offsetHeight) * 100).toFixed(2) + "%";
             item.style.minHeight = p;

src/resizer/item.ts

@@ -19,14 +19,14 @@ import Sizer from "./sizer";
 import Resizer, {IConfig} from "./resizer";
 
 export default class ResizeItem<C extends IConfig = IConfig> {
-    protected readonly domNode: HTMLElement;
+    public readonly domNode: HTMLElement;
     protected readonly id: string;
     protected reverse: boolean;
 
     constructor(
         handle: HTMLElement,
         public readonly resizer: Resizer<C>,
-        protected readonly sizer: Sizer,
+        public readonly sizer: Sizer,
     ) {
         const id = handle.getAttribute("data-id");
         const reverse = resizer.isReverseResizeHandle(handle);
@@ -89,8 +89,16 @@ export default class ResizeItem<C extends IConfig = IConfig> {
         this.sizer.finish(this.domNode);
     }
 
-    public setSize(size: number) {
+    public getSize() {
+        return this.sizer.getDesiredItemSize(this.domNode);
+    }
+
+    public setRawSize(size: string) {
         this.sizer.setItemSize(this.domNode, size);
+    }
+
+    public setSize(size: number) {
+        this.setRawSize(`${Math.round(size)}px`);
         const callback = this.resizer.config.onResized;
         if (callback) {
             callback(size, this.id, this.domNode);

src/resizer/resizer.ts

@@ -50,7 +50,7 @@ export default class Resizer<C extends IConfig = IConfig> {
     // TODO move vertical/horizontal to config option/container class
     // as it doesn't make sense to mix them within one container/Resizer
     constructor(
-        private readonly container: HTMLElement,
+        public container: HTMLElement,
         private readonly distributorCtor: {
             new(item: ResizeItem): FixedDistributor<C, any>;
             createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer): ResizeItem;
@@ -145,10 +145,10 @@ export default class Resizer<C extends IConfig = IConfig> {
             if (this.classNames.resizing) {
                 this.container.classList.remove(this.classNames.resizing);
             }
+            distributor.finish();
             if (this.config.onResizeStop) {
                 this.config.onResizeStop();
             }
-            distributor.finish();
             body.removeEventListener("mouseup", finishResize, false);
             document.removeEventListener("mouseleave", finishResize, false);
             body.removeEventListener("mousemove", onMouseMove, false);

src/resizer/sizer.ts

@@ -68,11 +68,19 @@ export default class Sizer {
         return offset;
     }
 
-    public setItemSize(item: HTMLElement, size: number) {
+    public getDesiredItemSize(item: HTMLElement) {
         if (this.vertical) {
-            item.style.height = `${Math.round(size)}px`;
+            return item.style.height;
         } else {
-            item.style.width = `${Math.round(size)}px`;
+            return item.style.width;
+        }
+    }
+
+    public setItemSize(item: HTMLElement, size: string) {
+        if (this.vertical) {
+            item.style.height = size;
+        } else {
+            item.style.width = size;
         }
     }