diff --git a/package.json b/package.json index e57f5f9..9dd8d9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rectpackr-layout", - "version": "1.0.0", + "version": "1.0.1", "description": "A web component that creates layouts by packing HTML elements as rectangles using a best-fit 2D strip-packing algorithm. Automatically measures dimensions and handles mixed content.", "keywords": [ "best-fit", @@ -71,12 +71,12 @@ "@rollup/plugin-typescript": "^12.1.4", "@tsconfig/node22": "^22.0.2", "@types/jest": "^30.0.0", - "@types/node": "^24.7.0", + "@types/node": "^24.7.1", "jest": "^30.2.0", "jest-environment-jsdom": "^30.2.0", "rollup": "^4.52.4", "rollup-plugin-dts": "^6.2.3", - "ts-jest": "^29.4.4", + "ts-jest": "^29.4.5", "tslib": "^2.8.1", "typescript": "^5.9.3" }, diff --git a/src/core/rectpackr.ts b/src/core/rectpackr.ts index 7f6afa2..b4b8ea5 100644 --- a/src/core/rectpackr.ts +++ b/src/core/rectpackr.ts @@ -33,7 +33,7 @@ export function create( container, children: [] as R['children'], childrenContainer, - isPendingStartObservingChildren: false, + isPending: { render: false, restartObservingChildren: false }, loadingImages: new Map(), observers: { childrenContainerMutation, childrenResize, containerResize }, stripPack, diff --git a/src/core/types.ts b/src/core/types.ts index 52fc006..943b633 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -17,8 +17,8 @@ export interface IRectpackr { width: number; }[]; childrenContainer: HTMLElement; - isPendingStartObservingChildren: boolean; - loadingImages: Map void>; + isPending: { render: boolean; restartObservingChildren: boolean }; + loadingImages: Map void>; observers: { childrenContainerMutation: MutationObserver; childrenResize: ResizeObserver; diff --git a/src/core/util.ts b/src/core/util.ts index ddb4ba4..f415d68 100644 --- a/src/core/util.ts +++ b/src/core/util.ts @@ -9,19 +9,28 @@ const isValidChildInstance = (el: Element): el is IRectpackrChildElement => el instanceof HTMLElement || el instanceof SVGElement; function render(instance: IRectpackr) { - updateStyle(instance, updateStripPack(instance)); + if (instance.isPending.render) { + return; + } + + instance.isPending.render = true; + + requestAnimationFrame(() => { + instance.isPending.render = false; + updateStyle(instance, updateStripPack(instance)); + }); } function restartObservingChildren(instance: IRectpackr) { - if (instance.isPendingStartObservingChildren) { + if (instance.isPending.restartObservingChildren) { return; } - instance.isPendingStartObservingChildren = true; + instance.isPending.restartObservingChildren = true; stopObservingChildren(instance); requestAnimationFrame(() => { - instance.isPendingStartObservingChildren = false; + instance.isPending.restartObservingChildren = false; startObservingChildren(instance); }); }