chore: fix rendering (#6)

Author: styiannis

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"
   },

src/core/rectpackr.ts

@@ -33,7 +33,7 @@ export function create<R extends IRectpackr>(
     container,
     children: [] as R['children'],
     childrenContainer,
-    isPendingStartObservingChildren: false,
+    isPending: { render: false, restartObservingChildren: false },
     loadingImages: new Map(),
     observers: { childrenContainerMutation, childrenResize, containerResize },
     stripPack,

src/core/types.ts

@@ -17,8 +17,8 @@ export interface IRectpackr {
     width: number;
   }[];
   childrenContainer: HTMLElement;
-  isPendingStartObservingChildren: boolean;
-  loadingImages: Map<HTMLElement, (this: HTMLImageElement) => void>;
+  isPending: { render: boolean; restartObservingChildren: boolean };
+  loadingImages: Map<HTMLImageElement, (this: HTMLImageElement) => void>;
   observers: {
     childrenContainerMutation: MutationObserver;
     childrenResize: ResizeObserver;

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);
   });
 }