Merge pull request #66 from projectstorm/layout_invalidation_fixes

dylanvorster · web-flow · commit 51fdfa660be3 · 2024-11-01T10:22:28.000-06:00
Layout invalidation fixes
diff --git a/.changeset/good-fans-beg.md b/.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
diff --git a/demo/package.json b/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"
   }
 }
diff --git a/example-project-js/package.json b/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"
   }
diff --git a/package.json b/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"
   }
diff --git a/packages/behavior-divider-dropzone/package.json b/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"
   }
 }
diff --git a/packages/behavior-panel-dropzone/package.json b/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"
   }
 }
diff --git a/packages/behavior-resize/package.json b/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"
   }
 }
diff --git a/packages/core/package.json b/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"
   }
 }
diff --git a/packages/core/src/entities/node/WorkspaceNodeModel.ts b/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;
   }
 
diff --git a/packages/core/src/widgets/primitives/DimensionTrackingWidget.tsx b/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();
diff --git a/packages/defaults/package.json b/packages/defaults/package.json
@@ -24,7 +24,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9",
-    "@types/lodash": "^4.17.9"
+    "@types/react": "^18.3.12",
+    "@types/lodash": "^4.17.13"
   }
 }
diff --git a/packages/dropzone-plugin-tabs/package.json b/packages/dropzone-plugin-tabs/package.json
@@ -19,6 +19,6 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9"
+    "@types/react": "^18.3.12"
   }
 }
diff --git a/packages/dropzone-plugin-tray/package.json b/packages/dropzone-plugin-tray/package.json
@@ -19,6 +19,6 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9"
+    "@types/react": "^18.3.12"
   }
 }
diff --git a/packages/model-floating-window/package.json b/packages/model-floating-window/package.json
@@ -19,6 +19,6 @@
     "@emotion/styled": "^11.13.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9"
+    "@types/react": "^18.3.12"
   }
 }
diff --git a/packages/model-tabs/package.json b/packages/model-tabs/package.json
@@ -18,7 +18,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9",
-    "@types/lodash": "^4.17.9"
+    "@types/react": "^18.3.12",
+    "@types/lodash": "^4.17.13"
   }
 }
diff --git a/packages/model-tray/package.json b/packages/model-tray/package.json
@@ -18,7 +18,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@types/react": "^18.3.9",
-    "@types/lodash": "^4.17.9"
+    "@types/react": "^18.3.12",
+    "@types/lodash": "^4.17.13"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -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
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,6 @@`
`16`	`16`	`"@emotion/styled": "^11.13.0"`
`17`	`17`	`},`
`18`	`18`	`"devDependencies": {`
`19`		`- "@types/react": "^18.3.9"`
	`19`	`+ "@types/react": "^18.3.12"`
`20`	`20`	`}`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`"@emotion/styled": "^11.13.0"`
`21`	`21`	`},`
`22`	`22`	`"devDependencies": {`
`23`		`- "@types/lodash": "^4.17.9",`
`24`		`- "@types/react": "^18.3.9"`
	`23`	`+ "@types/lodash": "^4.17.13",`
	`24`	`+ "@types/react": "^18.3.12"`
`25`	`25`	`}`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -121,12 +121,14 @@ export class WorkspaceNodeModel<`
`121`	`121`	`addModel(model: WorkspaceModel, position: number = null): this {`
`122`	`122`	`super.addModel(model, position);`
`123`	`123`	`this.recomputeDivisions();`
	`124`	`+ this.invalidateLayout();`
`124`	`125`	`return this;`
`125`	`126`	`}`
`126`	`127`
`127`	`128`	`removeModel(model: WorkspaceModel): this {`
`128`	`129`	`super.removeModel(model);`
`129`	`130`	`this.recomputeDivisions();`
	`131`	`+ this.invalidateLayout();`
`130`	`132`	`return this;`
`131`	`133`	`}`
`132`	`134`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`"@fortawesome/fontawesome-svg-core": "^6.6.0"`
`25`	`25`	`},`
`26`	`26`	`"devDependencies": {`
`27`		`- "@types/react": "^18.3.9",`
`28`		`- "@types/lodash": "^4.17.9"`
	`27`	`+ "@types/react": "^18.3.12",`
	`28`	`+ "@types/lodash": "^4.17.13"`
`29`	`29`	`}`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,6 @@`
`19`	`19`	`"@fortawesome/fontawesome-svg-core": "^6.6.0"`
`20`	`20`	`},`
`21`	`21`	`"devDependencies": {`
`22`		`- "@types/react": "^18.3.9"`
	`22`	`+ "@types/react": "^18.3.12"`
`23`	`23`	`}`
`24`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`"lodash": "^4.17.21"`
`19`	`19`	`},`
`20`	`20`	`"devDependencies": {`
`21`		`- "@types/react": "^18.3.9",`
`22`		`- "@types/lodash": "^4.17.9"`
	`21`	`+ "@types/react": "^18.3.12",`
	`22`	`+ "@types/lodash": "^4.17.13"`
`23`	`23`	`}`
`24`	`24`	`}`