Merge pull request #66 from projectstorm/layout_invalidation_fixes

Layout invalidation fixes

Author: dylanvorster

.changeset/good-fans-beg.md

@@ -0,0 +1,5 @@
+---
+'@projectstorm/react-workspaces-core': patch
+---
+
+Fix redraw issue with resize widgets in some cases when adding a model and a race condition occurs

demo/package.json

@@ -23,22 +23,22 @@
     "typeface-open-sans": "^1.1.13"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-essentials": "^8.4.1",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.3.3",
-    "@storybook/react-webpack5": "^8.3.3",
+    "@storybook/react": "^8.4.1",
+    "@storybook/react-webpack5": "^8.4.1",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^8.3.3",
-    "@types/lodash": "^4.17.9",
-    "@types/node": "^22.7.1",
-    "@types/react": "18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@storybook/theming": "^8.4.1",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.8.6",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "^18.3.1",
     "react-dom": "18.3.1",
     "source-map-loader": "^5.0.0",
-    "storybook": "^8.3.3",
-    "webpack": "^5.95.0"
+    "storybook": "^8.4.1",
+    "webpack": "^5.96.1"
   }
 }

example-project-js/package.json

@@ -16,14 +16,14 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "html-webpack-plugin": "^5.6.0",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "html-webpack-plugin": "^5.6.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "babel-loader": "^9.2.1",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "webpack": "^5.95.0",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"
   }

package.json

@@ -32,14 +32,14 @@
   "devDependencies": {
     "babel-loader": "^9.2.1",
     "source-map-loader": "^5.0.0",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-env": "^7.25.4",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
     "prettier": "^3.3.3",
-    "typescript": "^5.6.2",
+    "typescript": "^5.6.3",
     "terser-webpack-plugin": "^5.3.10",
-    "@changesets/cli": "^2.27.8",
-    "webpack": "^5.95.0",
+    "@changesets/cli": "^2.27.9",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0"
   }

packages/behavior-divider-dropzone/package.json

@@ -16,6 +16,6 @@
     "@emotion/styled": "^11.13.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9"
+    "@types/react": "^18.3.12"
   }
 }

packages/behavior-panel-dropzone/package.json

@@ -20,7 +20,7 @@
     "@emotion/styled": "^11.13.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.9",
-    "@types/react": "^18.3.9"
+    "@types/lodash": "^4.17.13",
+    "@types/react": "^18.3.12"
   }
 }

packages/behavior-resize/package.json

@@ -16,6 +16,6 @@
     "@emotion/styled": "^11.13.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9"
+    "@types/react": "^18.3.12"
   }
 }

packages/core/package.json

@@ -17,12 +17,12 @@
     "@emotion/react": "^11.13.3",
     "lodash": "^4.17.21",
     "color": "^4.2.3",
-    "uuid": "^10.0.0"
+    "uuid": "^11.0.2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
-    "@types/lodash": "^4.17.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/lodash": "^4.17.13",
     "@types/uuid": "^10.0.0"
   }
 }

packages/core/src/entities/node/WorkspaceNodeModel.ts

@@ -121,12 +121,14 @@ export class WorkspaceNodeModel<
   addModel(model: WorkspaceModel, position: number = null): this {
     super.addModel(model, position);
     this.recomputeDivisions();
+    this.invalidateLayout();
     return this;
   }
 
   removeModel(model: WorkspaceModel): this {
     super.removeModel(model);
     this.recomputeDivisions();
+    this.invalidateLayout();
     return this;
   }
 

packages/core/src/widgets/primitives/DimensionTrackingWidget.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { useEffect } from 'react';
 import { useForceUpdate } from '../hooks/useForceUpdate';
 import { DimensionContainer, IDimension } from '../../core/dimensions/DimensionContainer';
+import * as _ from 'lodash';
 
 export interface DimensionTrackingWidgetProps {
   dimension: DimensionContainer;
@@ -14,6 +15,9 @@ export interface DimensionTrackingWidgetProps {
 export const DimensionTrackingWidget: React.FC<React.PropsWithChildren<DimensionTrackingWidgetProps>> = (props) => {
   const forceUpdate = useForceUpdate();
   useEffect(() => {
+    _.defer(() => {
+      forceUpdate();
+    });
     return props.dimension.registerListener({
       updated: () => {
         forceUpdate();