Update dependencies (Re-Resizable and others) (#15301)

* Update dependencies (Re-Resizable and others) * Fix formatting
BabylonJS · Jul 18, 2024 · b0b8e72 · b0b8e72
1 parent 17b4c6f
commit b0b8e72
Show file tree

Hide file tree

Showing 22 changed files with 10,321 additions and 12,953 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dev/core/src/Compute/computeEffect.ts b/packages/dev/core/src/Compute/computeEffect.ts
@@ -365,7 +365,7 @@ export class ComputeEffect {
      * Gets the compute shader source code of this effect
      */
     public get computeSourceCode(): string {
-        return this._computeSourceCodeOverride ? this._computeSourceCodeOverride : this._pipelineContext?._getComputeShaderCode() ?? this._computeSourceCode;
+        return this._computeSourceCodeOverride ? this._computeSourceCodeOverride : (this._pipelineContext?._getComputeShaderCode() ?? this._computeSourceCode);
     }
 
     /**

diff --git a/packages/dev/core/src/Engines/nativeEngine.ts b/packages/dev/core/src/Engines/nativeEngine.ts
@@ -920,7 +920,7 @@ export class NativeEngine extends Engine {
         this._commandBufferEncoder.encodeCommandArgAsUInt32(culling ? 1 : 0);
         this._commandBufferEncoder.encodeCommandArgAsFloat32(zOffset);
         this._commandBufferEncoder.encodeCommandArgAsFloat32(zOffsetUnits);
-        this._commandBufferEncoder.encodeCommandArgAsUInt32(this.cullBackFaces ?? cullBackFaces ?? true ? 1 : 0);
+        this._commandBufferEncoder.encodeCommandArgAsUInt32((this.cullBackFaces ?? cullBackFaces ?? true) ? 1 : 0);
         this._commandBufferEncoder.encodeCommandArgAsUInt32(reverseSide ? 1 : 0);
         this._commandBufferEncoder.finishEncodingCommand();
     }

diff --git a/packages/dev/core/src/Engines/thinEngine.ts b/packages/dev/core/src/Engines/thinEngine.ts
@@ -1080,7 +1080,7 @@ export class ThinEngine extends AbstractEngine {
         }
 
         // Cull face
-        const cullFace = this.cullBackFaces ?? cullBackFaces ?? true ? this._gl.BACK : this._gl.FRONT;
+        const cullFace = (this.cullBackFaces ?? cullBackFaces ?? true) ? this._gl.BACK : this._gl.FRONT;
         if (this._depthCullingState.cullFace !== cullFace || force) {
             this._depthCullingState.cullFace = cullFace;
         }
@@ -3407,7 +3407,7 @@ export class ThinEngine extends AbstractEngine {
         texture.isReady = true;
         texture.type = texture.type !== -1 ? texture.type : Constants.TEXTURETYPE_UNSIGNED_BYTE;
         texture.format =
-            texture.format !== -1 ? texture.format : format ?? (extension === ".jpg" && !texture._useSRGBBuffer ? Constants.TEXTUREFORMAT_RGB : Constants.TEXTUREFORMAT_RGBA);
+            texture.format !== -1 ? texture.format : (format ?? (extension === ".jpg" && !texture._useSRGBBuffer ? Constants.TEXTUREFORMAT_RGB : Constants.TEXTUREFORMAT_RGBA));
 
         if (
             processFunction(potWidth, potHeight, img, extension, texture, () => {

diff --git a/packages/dev/core/src/Engines/webgpuEngine.ts b/packages/dev/core/src/Engines/webgpuEngine.ts
@@ -2434,7 +2434,7 @@ export class WebGPUEngine extends AbstractEngine {
                 texture.baseHeight = imageBitmap.height;
                 texture.width = imageBitmap.width;
                 texture.height = imageBitmap.height;
-                texture.format = texture.format !== -1 ? texture.format : format ?? Constants.TEXTUREFORMAT_RGBA;
+                texture.format = texture.format !== -1 ? texture.format : (format ?? Constants.TEXTUREFORMAT_RGBA);
                 texture.type = texture.type !== -1 ? texture.type : Constants.TEXTURETYPE_UNSIGNED_BYTE;
                 texture._creationFlags = creationFlags ?? 0;
 
@@ -3632,7 +3632,7 @@ export class WebGPUEngine extends AbstractEngine {
         }
 
         // Cull face
-        const cullFace = this.cullBackFaces ?? cullBackFaces ?? true ? 1 : 2;
+        const cullFace = (this.cullBackFaces ?? cullBackFaces ?? true) ? 1 : 2;
         if (this._depthCullingState.cullFace !== cullFace || force) {
             this._depthCullingState.cullFace = cullFace;
         }

diff --git a/packages/dev/core/src/Materials/Node/Blocks/Dual/clipPlanesBlock.ts b/packages/dev/core/src/Materials/Node/Blocks/Dual/clipPlanesBlock.ts
@@ -66,12 +66,12 @@ export class ClipPlanesBlock extends NodeMaterialBlock {
     public override prepareDefines(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines) {
         const scene = mesh.getScene();
 
-        const useClipPlane1 = nodeMaterial.clipPlane ?? scene.clipPlane ? true : false;
-        const useClipPlane2 = nodeMaterial.clipPlane2 ?? scene.clipPlane2 ? true : false;
-        const useClipPlane3 = nodeMaterial.clipPlane3 ?? scene.clipPlane3 ? true : false;
-        const useClipPlane4 = nodeMaterial.clipPlane4 ?? scene.clipPlane4 ? true : false;
-        const useClipPlane5 = nodeMaterial.clipPlane5 ?? scene.clipPlane5 ? true : false;
-        const useClipPlane6 = nodeMaterial.clipPlane6 ?? scene.clipPlane6 ? true : false;
+        const useClipPlane1 = (nodeMaterial.clipPlane ?? scene.clipPlane) ? true : false;
+        const useClipPlane2 = (nodeMaterial.clipPlane2 ?? scene.clipPlane2) ? true : false;
+        const useClipPlane3 = (nodeMaterial.clipPlane3 ?? scene.clipPlane3) ? true : false;
+        const useClipPlane4 = (nodeMaterial.clipPlane4 ?? scene.clipPlane4) ? true : false;
+        const useClipPlane5 = (nodeMaterial.clipPlane5 ?? scene.clipPlane5) ? true : false;
+        const useClipPlane6 = (nodeMaterial.clipPlane6 ?? scene.clipPlane6) ? true : false;
 
         defines.setValue("CLIPPLANE", useClipPlane1, true);
         defines.setValue("CLIPPLANE2", useClipPlane2, true);

diff --git a/packages/dev/core/src/Materials/effect.ts b/packages/dev/core/src/Materials/effect.ts
@@ -594,7 +594,7 @@ export class Effect implements IDisposable {
     public get vertexSourceCode(): string {
         return this._vertexSourceCodeOverride && this._fragmentSourceCodeOverride
             ? this._vertexSourceCodeOverride
-            : this._pipelineContext?._getVertexShaderCode() ?? this._vertexSourceCode;
+            : (this._pipelineContext?._getVertexShaderCode() ?? this._vertexSourceCode);
     }
 
     /**
@@ -604,7 +604,7 @@ export class Effect implements IDisposable {
     public get fragmentSourceCode(): string {
         return this._vertexSourceCodeOverride && this._fragmentSourceCodeOverride
             ? this._fragmentSourceCodeOverride
-            : this._pipelineContext?._getFragmentShaderCode() ?? this._fragmentSourceCode;
+            : (this._pipelineContext?._getFragmentShaderCode() ?? this._fragmentSourceCode);
     }
 
     /**

diff --git a/packages/dev/core/src/Meshes/Builders/decalBuilder.ts b/packages/dev/core/src/Meshes/Builders/decalBuilder.ts
@@ -201,21 +201,21 @@ export function CreateDecal(
                 weights[3] /= sumw;
             }
 
-            const v0LocalPositionX = v0.localPositionOverride ? v0.localPositionOverride[0] : localPositions?.[v0.vertexIdx] ?? 0;
-            const v0LocalPositionY = v0.localPositionOverride ? v0.localPositionOverride[1] : localPositions?.[v0.vertexIdx + 1] ?? 0;
-            const v0LocalPositionZ = v0.localPositionOverride ? v0.localPositionOverride[2] : localPositions?.[v0.vertexIdx + 2] ?? 0;
+            const v0LocalPositionX = v0.localPositionOverride ? v0.localPositionOverride[0] : (localPositions?.[v0.vertexIdx] ?? 0);
+            const v0LocalPositionY = v0.localPositionOverride ? v0.localPositionOverride[1] : (localPositions?.[v0.vertexIdx + 1] ?? 0);
+            const v0LocalPositionZ = v0.localPositionOverride ? v0.localPositionOverride[2] : (localPositions?.[v0.vertexIdx + 2] ?? 0);
 
-            const v1LocalPositionX = v1.localPositionOverride ? v1.localPositionOverride[0] : localPositions?.[v1.vertexIdx] ?? 0;
-            const v1LocalPositionY = v1.localPositionOverride ? v1.localPositionOverride[1] : localPositions?.[v1.vertexIdx + 1] ?? 0;
-            const v1LocalPositionZ = v1.localPositionOverride ? v1.localPositionOverride[2] : localPositions?.[v1.vertexIdx + 2] ?? 0;
+            const v1LocalPositionX = v1.localPositionOverride ? v1.localPositionOverride[0] : (localPositions?.[v1.vertexIdx] ?? 0);
+            const v1LocalPositionY = v1.localPositionOverride ? v1.localPositionOverride[1] : (localPositions?.[v1.vertexIdx + 1] ?? 0);
+            const v1LocalPositionZ = v1.localPositionOverride ? v1.localPositionOverride[2] : (localPositions?.[v1.vertexIdx + 2] ?? 0);
 
-            const v0LocalNormalX = v0.localNormalOverride ? v0.localNormalOverride[0] : localNormals?.[v0.vertexIdx] ?? 0;
-            const v0LocalNormalY = v0.localNormalOverride ? v0.localNormalOverride[1] : localNormals?.[v0.vertexIdx + 1] ?? 0;
-            const v0LocalNormalZ = v0.localNormalOverride ? v0.localNormalOverride[2] : localNormals?.[v0.vertexIdx + 2] ?? 0;
+            const v0LocalNormalX = v0.localNormalOverride ? v0.localNormalOverride[0] : (localNormals?.[v0.vertexIdx] ?? 0);
+            const v0LocalNormalY = v0.localNormalOverride ? v0.localNormalOverride[1] : (localNormals?.[v0.vertexIdx + 1] ?? 0);
+            const v0LocalNormalZ = v0.localNormalOverride ? v0.localNormalOverride[2] : (localNormals?.[v0.vertexIdx + 2] ?? 0);
 
-            const v1LocalNormalX = v1.localNormalOverride ? v1.localNormalOverride[0] : localNormals?.[v1.vertexIdx] ?? 0;
-            const v1LocalNormalY = v1.localNormalOverride ? v1.localNormalOverride[1] : localNormals?.[v1.vertexIdx + 1] ?? 0;
-            const v1LocalNormalZ = v1.localNormalOverride ? v1.localNormalOverride[2] : localNormals?.[v1.vertexIdx + 2] ?? 0;
+            const v1LocalNormalX = v1.localNormalOverride ? v1.localNormalOverride[0] : (localNormals?.[v1.vertexIdx] ?? 0);
+            const v1LocalNormalY = v1.localNormalOverride ? v1.localNormalOverride[1] : (localNormals?.[v1.vertexIdx + 1] ?? 0);
+            const v1LocalNormalZ = v1.localNormalOverride ? v1.localNormalOverride[2] : (localNormals?.[v1.vertexIdx + 2] ?? 0);
 
             const interpNormalX = v0LocalNormalX + (v1LocalNormalX - v0LocalNormalX) * clipFactor;
             const interpNormalY = v0LocalNormalY + (v1LocalNormalY - v0LocalNormalY) * clipFactor;

diff --git a/packages/dev/core/src/Meshes/subMesh.ts b/packages/dev/core/src/Meshes/subMesh.ts
@@ -72,7 +72,7 @@ export class SubMesh implements ICullable {
      * Gets associated (main) effect (possibly the effect override if defined)
      */
     public get effect(): Nullable<Effect> {
-        return this._mainDrawWrapperOverride ? this._mainDrawWrapperOverride.effect : this._getDrawWrapper()?.effect ?? null;
+        return this._mainDrawWrapperOverride ? this._mainDrawWrapperOverride.effect : (this._getDrawWrapper()?.effect ?? null);
     }
 
     /** @internal */

diff --git a/packages/dev/core/src/Misc/khronosTextureContainer2.ts b/packages/dev/core/src/Misc/khronosTextureContainer2.ts
@@ -323,7 +323,7 @@ export class KhronosTextureContainer2 {
             } else if (typeof KTX2DECODER !== "undefined") {
                 KhronosTextureContainer2._KTX2DecoderModule = KTX2DECODER;
             }
-            const numberOfWorkers = typeof numWorkersOrOptions === "number" ? numWorkersOrOptions : numWorkersOrOptions.numWorkers ?? KhronosTextureContainer2.DefaultNumWorkers;
+            const numberOfWorkers = typeof numWorkersOrOptions === "number" ? numWorkersOrOptions : (numWorkersOrOptions.numWorkers ?? KhronosTextureContainer2.DefaultNumWorkers);
             KhronosTextureContainer2._Initialize(numberOfWorkers);
         }
     }

diff --git a/packages/dev/core/src/Rendering/GlobalIllumination/giRSMManager.ts b/packages/dev/core/src/Rendering/GlobalIllumination/giRSMManager.ts
@@ -465,7 +465,7 @@ export class GIRSMManager {
                     const rtws = this._countersRTW[i];
                     for (let t = 0; t < rtws.length; ++t) {
                         if (t === 0) {
-                            this._counters[i].value = this.pause ? 0 : (rtws[t] as WebGPURenderTargetWrapper).gpuTimeInFrame?.counter.lastSecAverage ?? 0;
+                            this._counters[i].value = this.pause ? 0 : ((rtws[t] as WebGPURenderTargetWrapper).gpuTimeInFrame?.counter.lastSecAverage ?? 0);
                         } else if (!this.pause) {
                             this._counters[i].value += (rtws[t] as WebGPURenderTargetWrapper).gpuTimeInFrame?.counter.lastSecAverage ?? 0;
                         }

diff --git a/packages/dev/core/src/Rendering/edgesRenderer.ts b/packages/dev/core/src/Rendering/edgesRenderer.ts
@@ -547,7 +547,7 @@ export class EdgesRenderer implements IEdgesRenderer {
          * Find all vertices that are at the same location (with an epsilon) and remapp them on the same vertex
          */
         const useFastVertexMerger = this._options?.useFastVertexMerger ?? true;
-        const epsVertexMerge = useFastVertexMerger ? Math.round(-Math.log(this._options?.epsilonVertexMerge ?? 1e-6) / Math.log(10)) : this._options?.epsilonVertexMerge ?? 1e-6;
+        const epsVertexMerge = useFastVertexMerger ? Math.round(-Math.log(this._options?.epsilonVertexMerge ?? 1e-6) / Math.log(10)) : (this._options?.epsilonVertexMerge ?? 1e-6);
         const remapVertexIndices: Array<number> = [];
         const uniquePositions: Array<number> = []; // list of unique index of vertices - needed for tessellation
 

diff --git a/packages/dev/core/src/Rendering/fluidRenderer/fluidRenderingTargetRenderer.ts b/packages/dev/core/src/Rendering/fluidRenderer/fluidRenderingTargetRenderer.ts
@@ -836,7 +836,7 @@ export class FluidRenderingTargetRenderer {
                         texture = this._thicknessRenderTarget?.texture ?? null;
                         break;
                     case FluidRenderingDebug.ThicknessBlurredTexture:
-                        texture = this._thicknessRenderTarget?.enableBlur ? this._thicknessRenderTarget?.textureBlur ?? null : this._thicknessRenderTarget?.texture ?? null;
+                        texture = this._thicknessRenderTarget?.enableBlur ? (this._thicknessRenderTarget?.textureBlur ?? null) : (this._thicknessRenderTarget?.texture ?? null);
                         break;
                     case FluidRenderingDebug.DiffuseTexture:
                         if (this._diffuseRenderTarget) {

diff --git a/packages/dev/inspector/package.json b/packages/dev/inspector/package.json
@@ -35,7 +35,7 @@
         "@types/react-dom": "^17.0.10",
         "gif.js.optimized": "^1.0.1",
         "sass": "^1.62.1",
-        "re-resizable": "^4.9.1",
+        "re-resizable": "^6.9.1",
         "react": "^17.0.2",
         "react-contextmenu": "RaananW/react-contextmenu",
         "react-dom": "^17.0.2"

diff --git a/packages/dev/inspector/src/components/actionTabs/actionTabsComponent.tsx b/packages/dev/inspector/src/components/actionTabs/actionTabsComponent.tsx
@@ -7,7 +7,7 @@ import { TabsComponent } from "./tabsComponent";
 import { faFileAlt, faWrench, faBug, faChartBar, faCog } from "@fortawesome/free-solid-svg-icons";
 import { StatisticsTabComponent } from "./tabs/statisticsTabComponent";
 import { DebugTabComponent } from "./tabs/debugTabComponent";
-import Resizable from "re-resizable";
+import { Resizable } from "re-resizable";
 import { PropertyGridTabComponent } from "./tabs/propertyGridTabComponent";
 import { HeaderComponent } from "../headerComponent";
 import { ToolsTabComponent } from "./tabs/toolsTabComponent";
@@ -16,6 +16,8 @@ import { SettingsTabComponent } from "./tabs/settingsTabComponent";
 
 import "./actionTabs.scss";
 
+const ResizableCasted = Resizable as any as React.ComponentClass<any>;
+
 interface IActionTabsComponentProps {
     scene?: Scene;
     noCommands?: boolean;
@@ -153,7 +155,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
         }
 
         return (
-            <Resizable
+            <ResizableCasted
                 id="actionTabs"
                 minWidth={300}
                 maxWidth={600}
@@ -174,7 +176,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
                     />
                 )}
                 {this.renderContent()}
-            </Resizable>
+            </ResizableCasted>
         );
     }
 }
diff --git a/...ctor/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor/scss/canvas.scss b/...ctor/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor/scss/canvas.scss
@@ -23,11 +23,11 @@
             width: 100%;
             height: 100%;
             pointer-events: none;
+            z-index: 1;
 
             &:focus {
                 outline: none;
             }
-            z-index: 1;
         }
 
         #svg-graph-horizontal {
@@ -37,11 +37,11 @@
             width: calc(100% - 40px);
             height: 100%;
             pointer-events: none;
+            z-index: 1;
 
             &:focus {
                 outline: none;
             }
-            z-index: 1;
         }
 
         #dark-rectangle {

diff --git a/...pector/src/components/actionTabs/tabs/propertyGrids/materials/textures/textureEditor.scss b/...pector/src/components/actionTabs/tabs/propertyGrids/materials/textures/textureEditor.scss
@@ -111,22 +111,22 @@
         }
 
         .pixel-data {
+            width: 45px;
+            color: #afafaf;
+            display: flex;
+            justify-content: space-between;
+            font-size: 15px;
             &:first-of-type {
                 margin-left: 15px;
             }
             &:last-of-type {
                 padding-right: 15px;
             }
-            width: 45px;
-            color: #afafaf;
-            display: flex;
-            justify-content: space-between;
             .value {
                 display: inline-block;
                 width: 30px;
                 color: white;
             }
-            font-size: 15px;
         }
     }
 
@@ -206,6 +206,7 @@
         right: 0;
         width: 80px;
         background: #666666;
+        user-select: none;
         .channel {
             color: white;
             border-bottom: 2px solid #232323;
@@ -227,7 +228,6 @@
                 border-bottom: none;
             }
         }
-        user-select: none;
     }
 
     #canvas-ui {

diff --git a/packages/dev/inspector/src/components/embedHost/embedHostComponent.tsx b/packages/dev/inspector/src/components/embedHost/embedHostComponent.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HeaderComponent } from "../headerComponent";
-import Resizable from "re-resizable";
+import { Resizable } from "re-resizable";
 import { SceneExplorerComponent } from "../sceneExplorer/sceneExplorerComponent";
 import { ActionTabsComponent } from "../actionTabs/actionTabsComponent";
 import type { Scene } from "core/scene";
@@ -9,6 +9,8 @@ import type { IExplorerExtensibilityGroup, DebugLayerTab, IExplorerAdditionalNod
 
 const Split = require("split.js").default;
 
+const ResizableCasted = Resizable as any as React.ComponentClass<any>;
+
 import "./embedHost.scss";
 
 interface IEmbedHostComponentProps {
@@ -124,7 +126,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
         }
 
         return (
-            <Resizable
+            <ResizableCasted
                 id="embed"
                 minWidth={300}
                 maxWidth={600}
@@ -142,7 +144,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
                     onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable}
                 />
                 {this.renderContent()}
-            </Resizable>
+            </ResizableCasted>
         );
     }
 }
diff --git a/packages/dev/inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx b/packages/dev/inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx
@@ -7,7 +7,7 @@ import type { Scene } from "core/scene";
 import { EngineStore } from "core/Engines/engineStore";
 
 import { TreeItemComponent } from "./treeItemComponent";
-import Resizable from "re-resizable";
+import { Resizable } from "re-resizable";
 import { HeaderComponent } from "../headerComponent";
 import { SceneTreeItemComponent } from "./entities/sceneTreeItemComponent";
 import { Tools } from "../../tools";
@@ -42,6 +42,8 @@ interface ISceneExplorerFilterComponentProps {
     onFilter: (filter: string) => void;
 }
 
+const ResizableCasted = Resizable as any as React.ComponentClass<any>;
+
 export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
     constructor(props: ISceneExplorerFilterComponentProps) {
         super(props);
@@ -732,16 +734,16 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         }
 
         return (
-            <Resizable
+            <ResizableCasted
                 tabIndex={-1}
                 id="sceneExplorer"
-                ref={this._sceneExplorerRef}
                 size={{ height: "100%" }}
+                ref={this._sceneExplorerRef}
                 minWidth={300}
                 maxWidth={600}
                 minHeight="100%"
                 enable={{ top: false, right: true, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}
-                onKeyDown={(keyEvent) => this.processKeys(keyEvent, allNodes)}
+                onKeyDown={(keyEvent: React.KeyboardEvent<HTMLDivElement>) => this.processKeys(keyEvent, allNodes)}
             >
                 {!this.props.noHeader && (
                     <HeaderComponent
@@ -754,7 +756,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                     />
                 )}
                 {this.renderContent(allNodes)}
-            </Resizable>
+            </ResizableCasted>
         );
     }
 }
diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.modules.scss b/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.modules.scss
@@ -15,12 +15,12 @@
 }
 
 .highlighted {
+    animation: glow 0.5s infinite alternate;
     @keyframes glow {
         to {
             border-color: white;
         }
     }
-    animation: glow 0.5s infinite alternate;
 }
 
 .header-container {