imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Relax flexboxes in resizer on window resize

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-10-13 16:11:58 +01:00
parent ba21c6ed36
commit 447ea9eb23
2 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/resizer/resizer.ts
View file

@ -27,6 +27,8 @@ classNames:
resizing: string
*/
import {throttle} from "lodash";
import FixedDistributor from "./distributors/fixed";
import Sizer from "./sizer";
import ResizeItem from "./item";
@ -76,10 +78,12 @@ export default class Resizer<C extends IConfig = IConfig> {
public attach() {
this.container.addEventListener("mousedown", this.onMouseDown, false);
window.addEventListener("resize", this.onResize);
}
public detach() {
this.container.removeEventListener("mousedown", this.onMouseDown, false);
window.removeEventListener("resize", this.onResize);
}
/**
@ -158,6 +162,17 @@ export default class Resizer<C extends IConfig = IConfig> {
body.addEventListener("mousemove", onMouseMove, false);
};
private onResize = throttle(() => {
const distributors = this.getResizeHandles().map(handle => {
const {distributor} = this.createSizerAndDistributor(<HTMLDivElement>handle);
return distributor;
});
// relax all items if they had any overconstrained flexboxes
distributors.forEach(d => d.start());
distributors.forEach(d => d.finish());
}, 100, {trailing: true, leading: true});
private createSizerAndDistributor(
resizeHandle: HTMLDivElement,
): {sizer: Sizer, distributor: FixedDistributor<any>} {