Merge pull request #68 from projectstorm/debounce_invalidations

Debounce invalidations

Author: dylanvorster

.changeset/swift-vans-roll.md

@@ -0,0 +1,5 @@
+---
+'@projectstorm/react-workspaces-core': minor
+---
+
+Add debounce to layout invalidations

demo/package.json

@@ -7,7 +7,7 @@
     "storybook:build": "storybook build -o .out"
   },
   "dependencies": {
-    "@emotion/styled": "^11.13.0",
+    "@emotion/styled": "^11.13.5",
     "@projectstorm/react-workspaces-behavior-divider-dropzone": "workspace:*",
     "@projectstorm/react-workspaces-behavior-panel-dropzone": "workspace:*",
     "@projectstorm/react-workspaces-behavior-resize": "workspace:*",
@@ -26,19 +26,19 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addon-essentials": "^8.4.1",
+    "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.4.1",
-    "@storybook/react-webpack5": "^8.4.1",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^8.4.1",
+    "@storybook/theming": "^8.4.5",
     "@types/lodash": "^4.17.13",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.10.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "^18.3.1",
     "react-dom": "18.3.1",
     "source-map-loader": "^5.0.0",
-    "storybook": "^8.4.1",
+    "storybook": "^8.4.5",
     "webpack": "^5.96.1"
   }
 }

example-project-js/package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
     "@projectstorm/react-workspaces-behavior-resize": "workspace:*",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package.json

@@ -35,10 +35,10 @@
     "@babel/core": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
-    "prettier": "^3.3.3",
-    "typescript": "^5.6.3",
+    "prettier": "^3.4.1",
+    "typescript": "^5.7.2",
     "terser-webpack-plugin": "^5.3.10",
-    "@changesets/cli": "^2.27.9",
+    "@changesets/cli": "^2.27.10",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0"

packages/behavior-divider-dropzone/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
     "react": "^18.3.1",
-    "@emotion/styled": "^11.13.0"
+    "@emotion/styled": "^11.13.5"
   },
   "devDependencies": {
     "@types/react": "^18.3.12"

packages/behavior-panel-dropzone/package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "react": "^18.3.1",
     "lodash": "^4.17.21",
-    "@emotion/styled": "^11.13.0"
+    "@emotion/styled": "^11.13.5"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.13",

packages/behavior-resize/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
     "react": "^18.3.1",
-    "@emotion/styled": "^11.13.0"
+    "@emotion/styled": "^11.13.5"
   },
   "devDependencies": {
     "@types/react": "^18.3.12"

packages/core/package.json

@@ -13,11 +13,11 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@emotion/styled": "^11.13.0",
-    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.5",
+    "@emotion/react": "^11.13.5",
     "lodash": "^4.17.21",
     "color": "^4.2.3",
-    "uuid": "^11.0.2"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

packages/core/src/core/WorkspaceEngine.tsx

@@ -59,7 +59,7 @@ export class WorkspaceEngine extends BaseObserver<WorkspaceEngineListener> imple
     this.rootModelListener?.();
     this.rootModelListener = model.registerListener({
       layoutInvalidated: () => {
-        this.invalidateLayout();
+        this.invalidateLayoutDebounced();
       },
       dimensionsInvalidated: () => {
         this.invalidateDimensionsDebounced();
@@ -78,6 +78,10 @@ export class WorkspaceEngine extends BaseObserver<WorkspaceEngineListener> imple
     this.iterateListeners((cb) => cb.layoutInvalidated?.());
   }
 
+  invalidateLayoutDebounced = _.debounce(() => {
+    this.invalidateLayout();
+  }, 200);
+
   invalidateDimensionsDebounced = _.debounce(() => {
     this.invalidateDimensions();
   }, 200);

packages/defaults/package.json

@@ -12,16 +12,16 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "@emotion/styled": "^11.13.0",
-    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.5",
+    "@emotion/react": "^11.13.5",
     "lodash": "^4.17.21",
     "@projectstorm/react-workspaces-core": "workspace:*",
     "@projectstorm/react-workspaces-model-tabs": "workspace:*",
     "@projectstorm/react-workspaces-model-tray": "workspace:*",
     "@projectstorm/react-workspaces-model-floating-window": "workspace:*",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0"
+    "@fortawesome/fontawesome-svg-core": "^6.7.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",