feat(reconciler): add grid layout

Author: simonedevit

CONTRIBUTING.md

@@ -48,26 +48,18 @@ Do you have a great idea or a request for a new feature? Please use [Discussions
         ```bash
         npx create-reactylon-app playground
         ```
-    3. Go into _tsconfig.json_ and add to the **compilerOptions** attribute:
-
-        ```json
-        "paths": {
-            "*": [
-              "node_modules/*"
-            ]
-        },
-        ```
-    4. Go into _webpack.config.ts_ and add to **resolve** attribute:
+    3. Go into _webpack.config.ts_ and add to **resolve** attribute:
 
          ```ts
         modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
          ```
-    5. Move on move _playground_ folder and symlink the Reactylon package by executing the command:
+    4. Move on _playground_ folder and symlink the Reactylon package by executing the command:
 
         ```bash
         cd playground && npm link reactylon
         ```
-    6. Start the live server by executing the command:
+    <a id='linking'></a>
+    5. Start the live server by executing the command:
 
         ```bash
         npm start
@@ -91,6 +83,9 @@ Do you have a great idea or a request for a new feature? Please use [Discussions
 
 (*) If you make changes to _packages/common_ or _packages/generator_, run `npm run build` in the respective directory.
 
+## Troubleshooting
+After [linking](#linking), if you are experiencing TypeScript errors on Reactylon JSX elements (e.g., ```Property 'box' does not exist on type 'JSX.IntrinsicElements'.ts(2339)```), it means that your `@types/react` version is mismatched with Reactylon's `@types/react` version. For module augmentation to work properly, both must use the same version of the library.  To fix this, make sure you have the same `@types/react` version installed in both your playground project and Reactylon. 
+
 ## Development Guidelines
 
 ### Git Hooks

package-lock.json

@@ -40,6 +40,16 @@ type JsxElementsInfo = {
     constructorArguments: Record<string, Array<string>>;
 };
 
+// special elements for Grid layout (these elements are not in BabylonJS)
+function createJsxGridElements(jsxElements: JsxElementsInfo) {
+    const importStatement = `import type { RowProps, ColumnProps } from '../types/props';`;
+    const rowDeclarationStatement = `row: React.DetailedHTMLProps<RowProps, any>;`;
+    const columnDeclarationStatement = `column: React.DetailedHTMLProps<ColumnProps, any>;`;
+
+    jsxElements.imports.push(importStatement);
+    jsxElements.declarations.push(rowDeclarationStatement, columnDeclarationStatement);
+}
+
 async function createJsxBabylonElements(index: string, babylonPackage: BabylonPackages): Promise<JsxElementsInfo> {
     const jsxElements: JsxElementsInfo = {
         imports: [],
@@ -119,6 +129,10 @@ ${props}
         }
     });
     //console.log('Total classes in error: ', classesInError);
+
+    if (babylonPackage === BabylonPackages.GUI) {
+        createJsxGridElements(jsxElements);
+    }
     return jsxElements;
 }
 
@@ -142,8 +156,8 @@ const packages = {
         const jsxElements = await createJsxBabylonElements(index, babylonPackage);
         const declarationsContent = `
 //@ts-nocheck
-import { type BabylonProps, type ExcludeReadonlyAndPrivate } from '../types/types';
-import { type MeshProps, type GuiProps, type Clonable, type WebXRCameraProps, type TextureProps, type MaterialProps, type CameraProps } from '../types/props';
+import type { BabylonProps, ExcludeReadonlyAndPrivate } from '../types/types';
+import type { MeshProps, GuiProps, Clonable, WebXRCameraProps, TextureProps, MaterialProps, CameraProps } from '../types/props';
 ${jsxElements.imports.join('\n')}
     
 export interface JSXElements {

packages/generator/index.ts

@@ -1,5 +1,6 @@
 import { jest } from '@jest/globals';
 import * as BabylonCore from '@babylonjs/core';
+import * as BabylonGui from '@babylonjs/gui';
 import { BabylonPackages, lowercaseFirstLetter } from '@dvmstudios/reactylon-common'
 import { register } from './src/core/inventory';
 
@@ -10,18 +11,61 @@ jest.mock('react-dom/server', () => {
     };
 });
 
+// Mock HTMLCanvasElement and its getContext method
+HTMLCanvasElement.prototype.getContext = jest.fn(() => {
+    return {
+        fillRect: jest.fn(),
+        clearRect: jest.fn(),
+        getImageData: jest.fn(),
+        putImageData: jest.fn(),
+        createImageData: jest.fn(),
+        setTransform: jest.fn(),
+        drawImage: jest.fn(),
+        save: jest.fn(),
+        fillText: jest.fn(),
+        restore: jest.fn(),
+        beginPath: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        closePath: jest.fn(),
+        stroke: jest.fn(),
+        translate: jest.fn(),
+        scale: jest.fn(),
+        rotate: jest.fn(),
+        arc: jest.fn(),
+        fill: jest.fn(),
+        measureText: jest.fn(() => ({ width: 0 })),
+        transform: jest.fn(),
+        rect: jest.fn(),
+        clip: jest.fn(),
+    }
+});
+
 // Suppress warning React component capital letter (Babylon.js elements are JSXIntrinsicElements)
 const originalError = console.error.bind(console.error);
 
 beforeAll(() => {
     // Populate inventory with all Babylon.js core elements
     const coreElements = Object.entries(BabylonCore).reduce((obj, [key, value]) => {
-        const type = key.replace('Create', ''); // MeshBuilder case
-        obj[lowercaseFirstLetter(type)] = [value, BabylonPackages.CORE];
+        const type = lowercaseFirstLetter(key.replace('Create', '')); // MeshBuilder case
+        if (!obj[type]) {
+            obj[type] = [value, BabylonPackages.CORE];
+        }
+        return obj;
+    }, {});
+
+    // Populate inventory with all Babylon.js GUI elements
+    const guiElements = Object.entries(BabylonGui).reduce((obj, [key, value]) => {
+        const type = lowercaseFirstLetter(key);
+        if (!obj[type]) {
+            obj[type] = [value, BabylonPackages.GUI];
+        }
         return obj;
     }, {});
 
     register(coreElements);
+    register(guiElements);
+
     console.error = (msg, ...rest) => !msg.toString().includes('If you meant to render a React component, start its name with an uppercase letter.') && originalError(msg, ...rest);
 });
 

packages/library/setup-jest.js

@@ -80,6 +80,8 @@ const ConstructorsMap: Record<string, Array<string>> = {
    baseParticleSystem: ["name"],
    baseSixDofDragBehavior: [],
    baseTexture: ["sceneOrEngine","internalTexture"],
+   basicPositionUpdateBlock: ["name"],
+   basicSpriteUpdateBlock: ["name"],
    bezierCurveEase: ["x1","y1","x2","y2"],
    biPlanarBlock: ["name"],
    binaryFileAssetTask: ["name","url"],
@@ -115,6 +117,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    boundingSphere: ["min","max","worldMatrix"],
    boxBlock: ["name"],
    boxParticleEmitter: [],
+   boxShapeBlock: ["name"],
    buffer: ["engine","data","updatable","stride","postponeInternalCreation","instanced","useBytes","divisor","label"],
    cSG: [],
    cSG2: ["manifold","numProp","vertexStructure"],
@@ -202,6 +205,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    lines: ["name","options","scene"],
    mainAudioBusAsync: ["name","options","engine"],
    microphoneSoundSourceAsync: ["name","options","engine"],
+   createParticleBlock: ["name"],
    pickingRay: ["scene","x","y","world","camera","cameraViewSpace"],
    pickingRayInCameraSpace: ["scene","x","y","camera"],
    pickingRayInCameraSpaceToRef: ["scene","x","y","result","camera"],
@@ -250,9 +254,11 @@ const ConstructorsMap: Record<string, Array<string>> = {
    customBlock: ["name"],
    customParticleEmitter: [],
    customProceduralTexture: ["name","texturePath","size","scene","fallbackTexture","generateMipMaps","skipJson"],
+   customShapeBlock: ["name"],
    cylinderBlock: ["name"],
    cylinderDirectedParticleEmitter: ["radius","height","radiusRange","direction1","direction2"],
    cylinderParticleEmitter: ["radius","height","radiusRange","directionRandomizer"],
+   cylinderShapeBlock: ["name"],
    dataBuffer: [],
    dataReader: ["buffer"],
    database: ["urlToScene","callbackManifestChecked","disableManifestCheck"],
@@ -344,12 +350,14 @@ const ConstructorsMap: Record<string, Array<string>> = {
    flowGraphAcosBlock: ["config"],
    flowGraphAcoshBlock: ["config"],
    flowGraphAddBlock: ["config"],
+   flowGraphAngleBetweenBlock: ["config"],
    flowGraphArrayIndexBlock: ["config"],
    flowGraphAsinBlock: ["config"],
    flowGraphAsinhBlock: ["config"],
    flowGraphAtan2Block: ["config"],
    flowGraphAtanBlock: ["config"],
    flowGraphAtanhBlock: ["config"],
+   flowGraphAxisAngleFromQuaternionBlock: ["config"],
    flowGraphBezierCurveEasingBlock: ["config"],
    flowGraphBitwiseAndBlock: ["config"],
    flowGraphBitwiseLeftShiftBlock: ["config"],
@@ -373,6 +381,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    flowGraphCombineVector3Block: ["config"],
    flowGraphCombineVector4Block: ["config"],
    flowGraphConditionalDataBlock: ["config"],
+   flowGraphConjugateBlock: ["config"],
    flowGraphConnection: ["name","_connectionType","_ownerBlock"],
    flowGraphConsoleLogBlock: ["config"],
    flowGraphConstantBlock: ["config"],
@@ -457,6 +466,8 @@ const ConstructorsMap: Record<string, Array<string>> = {
    flowGraphPointerOutEventBlock: ["config"],
    flowGraphPointerOverEventBlock: ["config"],
    flowGraphPowerBlock: ["config"],
+   flowGraphQuaternionFromAxisAngleBlock: ["config"],
+   flowGraphQuaternionFromDirectionsBlock: ["config"],
    flowGraphRadToDegBlock: ["config"],
    flowGraphRandomBlock: ["config"],
    flowGraphReceiveCustomEventBlock: ["config"],
@@ -516,10 +527,11 @@ const ConstructorsMap: Record<string, Array<string>> = {
    frameGraphBlackAndWhiteTask: ["name","frameGraph","thinPostProcess"],
    frameGraphBloomTask: ["name","frameGraph","weight","kernel","threshold","hdr","bloomScale"],
    frameGraphBlurTask: ["name","frameGraph","thinPostProcess"],
-   frameGraphCascadedShadowGeneratorTask: [],
+   frameGraphCascadedShadowGeneratorTask: ["name","frameGraph","scene"],
    frameGraphChromaticAberrationTask: ["name","frameGraph","thinPostProcess"],
    frameGraphCircleOfConfusionTask: ["name","frameGraph","thinPostProcess"],
    frameGraphClearTextureTask: ["name","frameGraph"],
+   frameGraphContext: ["_engine","_textureManager","_scene"],
    frameGraphCopyToTextureTask: ["name","frameGraph"],
    frameGraphCullObjectsTask: ["name","frameGraph","scene"],
    frameGraphCullPass: ["name","parentTask","context","engine"],
@@ -539,11 +551,11 @@ const ConstructorsMap: Record<string, Array<string>> = {
    frameGraphPassCubeTask: ["name","frameGraph","thinPostProcess"],
    frameGraphPassTask: ["name","frameGraph","thinPostProcess"],
    frameGraphPostProcessTask: ["name","frameGraph","postProcess"],
-   frameGraphRenderContext: ["_engine","_textureManager","_scene"],
+   frameGraphRenderContext: ["engine","textureManager","scene"],
    frameGraphRenderPass: ["name","parentTask","context","engine"],
    frameGraphRenderTarget: ["name","textureManager","renderTargets","renderTargetDepth"],
    frameGraphSSRRenderingPipelineTask: ["name","frameGraph","textureType"],
-   frameGraphShadowGeneratorTask: ["name","frameGraph","scene"],
+   frameGraphShadowGeneratorTask: ["name","frameGraph","_scene"],
    frameGraphTAAObjectRendererTask: ["name","frameGraph","scene","options"],
    frameGraphTask: ["name","frameGraph"],
    frameGraphTextureManager: ["engine","_debugTextures","_scene"],
@@ -611,6 +623,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    geometryTextureFetchBlock: ["name"],
    geometryTransformBlock: ["name"],
    geometryTrigonometryBlock: ["name"],
+   getAngleBetweenQuaternions: ["q1","q2"],
    getClass: ["fqdn"],
    getClassName: ["obj"],
    getDOMTextContent: ["element"],
@@ -631,6 +644,8 @@ const ConstructorsMap: Record<string, Array<string>> = {
    getMimeType: [],
    getParser: ["name"],
    getPointsCount: ["allPoints"],
+   getQuaternionFromDirections: ["a","b"],
+   getQuaternionFromDirectionsToRef: ["a","b","result"],
    getRegisteredSceneLoaderPluginMetadata: [],
    getSignalInConnectionByUniqueId: ["blocks","uniqueId"],
    getTGAHeader: ["data"],
@@ -817,6 +832,10 @@ const ConstructorsMap: Record<string, Array<string>> = {
    nodeMaterialDefines: [],
    nodeMaterialTeleportInBlock: ["name"],
    nodeMaterialTeleportOutBlock: ["name"],
+   nodeParticleBlock: ["name"],
+   nodeParticleBuildState: [],
+   nodeParticleConnectionPoint: ["name","ownerBlock","direction"],
+   nodeParticleSystemSet: ["name"],
    nodeRenderGraph: ["name","scene","options"],
    nodeRenderGraphAnaglyphPostProcessBlock: ["name","frameGraph","scene"],
    nodeRenderGraphBlackAndWhitePostProcessBlock: ["name","frameGraph","scene"],
@@ -910,10 +929,25 @@ const ConstructorsMap: Record<string, Array<string>> = {
    parseValue: ["dataView","offset","type","size"],
    particle: ["particleSystem"],
    particleBlendMultiplyBlock: ["name"],
+   particleConditionBlock: ["name"],
+   particleConverterBlock: ["name"],
+   particleDebugBlock: ["name"],
+   particleElbowBlock: ["name"],
+   particleGradientBlock: ["name"],
+   particleGradientValueBlock: ["name"],
+   particleInputBlock: ["name","type"],
+   particleLerpBlock: ["name"],
+   particleMathBlock: ["name"],
    particleRampGradientBlock: ["name"],
+   particleRandomBlock: ["name"],
    particleSystem: [],
    particleSystemSet: [],
+   particleTeleportInBlock: ["name"],
+   particleTeleportOutBlock: ["name"],
    particleTextureBlock: ["name"],
+   particleTextureSourceBlock: ["name"],
+   particleTriggerBlock: ["name"],
+   particleTrigonometryBlock: ["name"],
    passCubePostProcess: ["name","options","camera","samplingMode","engine","reusable","textureType","blockCompilation"],
    passPostProcess: ["name","options","camera","samplingMode","engine","reusable","textureType","blockCompilation"],
    path2: ["x","y"],
@@ -960,6 +994,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    pointLight: ["name","position","scene"],
    pointListBlock: ["name"],
    pointParticleEmitter: [],
+   pointShapeBlock: ["name"],
    pointerDragBehavior: ["options"],
    pointerInfo: ["type","event","pickInfo","inputManager"],
    pointerInfoBase: ["type","event"],
@@ -1025,12 +1060,14 @@ const ConstructorsMap: Record<string, Array<string>> = {
    randomBlock: ["name"],
    randomGUID: [],
    randomNumberBlock: ["name"],
+   randomRangeBlock: ["name"],
    rawCubeTexture: ["scene","data","size","format","type","generateMipMaps","invertY","samplingMode","compression"],
    rawTexture: ["data","width","height","format","sceneOrEngine","generateMipMaps","invertY","samplingMode","type","creationFlags","useSRGBBuffer","waitDataToBeReady"],
    rawTexture2DArray: ["data","width","height","depth","format","scene","generateMipMaps","invertY","samplingMode","textureType","creationFlags"],
    rawTexture3D: ["data","width","height","depth","format","scene","generateMipMaps","invertY","samplingMode","textureType","creationFlags"],
    ray: ["origin","direction","length","epsilon"],
    rayHelper: ["ray"],
+   readExrDataAsync: ["data"],
    readFile: [],
    readFileError: ["message","file"],
    recastJSCrowd: ["plugin","maxAgents","maxAgentRadius","scene"],
@@ -1107,6 +1144,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    setToDefaultSFE: ["nodeMaterial"],
    setUVsBlock: ["name"],
    setValueAction: ["triggerOptions","target","propertyPath","value","condition"],
+   setupSpriteSheetBlock: ["name"],
    shaderCodeInliner: ["sourceCode","numMaxIterations"],
    shaderMaterial: ["name","scene","shaderPath","options","storeEffectOnSubMeshes"],
    shadowDepthWrapper: ["baseMaterial","scene","options"],
@@ -1128,6 +1166,8 @@ const ConstructorsMap: Record<string, Array<string>> = {
    sliderConstraint: ["pivotA","pivotB","axisA","axisB","scene"],
    smartArray: ["capacity"],
    smartArrayNoDuplicate: [],
+   smartFilterFragmentOutputBlock: ["name"],
+   smartFilterTextureBlock: ["name"],
    smoothStepBlock: ["name"],
    snapshotRenderingHelper: ["scene","options"],
    solidParticle: ["particleIndex","particleId","positionIndex","indiceIndex","model","shapeId","idxInShape","sps","modelBoundingInfo","materialIndex"],
@@ -1139,6 +1179,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    sphereBlock: ["name"],
    sphereDirectedParticleEmitter: ["radius","direction1","direction2"],
    sphereParticleEmitter: ["radius","radiusRange","directionRandomizer"],
+   sphereShapeBlock: ["name"],
    spherical: ["radius","theta","phi"],
    sphericalHarmonics: [],
    sphericalPolynomial: [],
@@ -1185,6 +1226,7 @@ const ConstructorsMap: Record<string, Array<string>> = {
    subtractBlock: ["name"],
    surfaceMagnetismBehavior: [],
    switchBooleanAction: ["triggerOptions","target","propertyPath","condition"],
+   systemBlock: ["name"],
    tAARenderingPipeline: ["name","scene","cameras","textureType"],
    tBNBlock: ["name"],
    targetCamera: ["name","position","scene","setActiveOnSceneIfNoneActive"],
@@ -1246,10 +1288,17 @@ const ConstructorsMap: Record<string, Array<string>> = {
    universalCamera: ["name","position","scene"],
    unregisterAllMaterialPlugins: [],
    unregisterMaterialPlugin: ["pluginName"],
+   updateAngleBlock: ["name"],
+   updateColorBlock: ["name"],
+   updateDirectionBlock: ["name"],
+   updateFlowMapBlock: ["name"],
+   updatePositionBlock: ["name"],
+   updateScaleBlock: ["name"],
+   updateSpriteCellIndexBlock: ["name"],
    uploadContent: ["texture","data"],
    uploadEnvLevelsAsync: ["texture","data","info"],
    uploadEnvSpherical: ["texture","info"],
-   uploadIrradianceLevelsAsync: ["mainTexture","imageData","size","imageType"],
+   uploadIrradianceLevelsAsync: ["mainTexture","imageData","size","imageType","dominantDirection"],
    uploadRadianceLevelsAsync: ["texture","imageData","imageType"],
    utilityLayerRenderer: ["originalScene","handleEvents","manualRender"],
    vRCameraMetrics: [],