support property transforms for constructor argument props (vector3, color3, color4).

Author: brianzinn

.npmignore

@@ -1,3 +1,4 @@
+coverage
 media
 node_modules
 src
@@ -10,6 +11,7 @@ tools
 .eslintrc
 .gitattributes
 .gitignore
+.nyc_output
 .storybook
 .travis.yml
 .vscode

src/ReactBabylonJSHostConfig.ts

@@ -5,7 +5,7 @@ import * as GENERATED from './generatedCode';
 import * as CUSTOM_HOSTS from './customHosts';
 
 import { CreatedInstance, CreatedInstanceMetadata, CustomProps } from './CreatedInstance';
-import { HasPropsHandlers, PropertyUpdate, UpdatePayload, PropsHandler } from './PropsHandler';
+import { HasPropsHandlers, PropertyUpdate, UpdatePayload, PropsHandler, CustomPropsHandler, PropChangeType } from './PropsHandler';
 import { LifecycleListener } from "./LifecycleListener";
 import { GeneratedParameter, CreationType } from './codeGenerationDescriptors';
 import { applyUpdateToInstance, applyInitialPropsToCreatedInstance } from './UpdateInstance';
@@ -125,17 +125,40 @@ function addChild(parent: CreatedInstance<any> | undefined, child: CreatedInstan
       console.error('undefined child', parent);
     } else {
       // doubly linking child to parent
-      parent.children.push(child) // TODO: need to remove from children as well when removing.
-      child.parent = parent
+      parent.children.push(child);
+      child.parent = parent;
     }
   }
 
   if (child && child.lifecycleListener && child.lifecycleListener.onParented) {
-    child.lifecycleListener.onParented(parent!, child)
+    child.lifecycleListener.onParented(parent!, child);
   }
 
   if (parent && parent.lifecycleListener && parent.lifecycleListener.onChildAdded) {
-    parent.lifecycleListener.onChildAdded(child, parent)
+    parent.lifecycleListener.onChildAdded(child, parent);
+  }
+}
+
+/**
+ * Allows constructor arguments to register for dynamically registered property transforms (should exclude undefined).
+ * TODO: include other types or add "PropsChangeType" to GeneratedParameters (would increase bundle size)
+ *
+ * @param type generated name (not same as PropChangeType)
+ * @param value parameter value
+ */
+const getConstructorValue = (type: string, value: any) : any => {
+  switch(type) {
+    case 'BabylonjsCoreVector3':
+      const v3result = CustomPropsHandler.HandlePropsChange(PropChangeType.Vector3, undefined, value);
+      return v3result.processed ? v3result.value : value;
+    case 'BabylonjsCoreColor3':
+      const c3result = CustomPropsHandler.HandlePropsChange(PropChangeType.Vector3, undefined, value);
+      return c3result.processed ? c3result.value : value;
+    case 'BabylonjsCoreColor4':
+      const c4result = CustomPropsHandler.HandlePropsChange(PropChangeType.Color4, undefined, value);
+      return c4result.processed ? c4result.value : value;
+    default:
+      return value;
   }
 }
 
@@ -335,7 +358,7 @@ const ReactBabylonJSHostConfig: HostConfig<
     } else {
       const createInfoArgs = classDefinition.CreateInfo;
       metadata = classDefinition.Metadata;
-      let generatedParameters: GeneratedParameter[] = createInfoArgs.parameters
+      let generatedParameters: GeneratedParameter[] = createInfoArgs.parameters;
 
       if (props.fromInstance !== undefined) {
         if (createInfoArgs.namespace.startsWith('@babylonjs/')) {
@@ -356,25 +379,25 @@ const ReactBabylonJSHostConfig: HostConfig<
         let args = generatedParameters.map(generatedParameter => {
           if (Array.isArray(generatedParameter.type)) {
             // TODO: if all props are missing, warn if main prop (ie: options) is required.
-            let newParameter = {} as any
+            let newParameter = {} as any;
             generatedParameter.type.forEach(subParameter => {
-              let subPropValue = props[subParameter.name]
+              let subPropValue = getConstructorValue(subParameter.type as string, props[subParameter.name]);
               if (subPropValue === undefined && subParameter.optional === false && generatedParameter.optional === false) {
-                console.warn("Missing a required secondary property:", subParameter.name)
+                console.warn("Missing a required secondary property:", subParameter.name);
               } else {
-                newParameter[subParameter.name] = subPropValue
+                newParameter[subParameter.name] = subPropValue;
               }
             })
-            return newParameter
+            return newParameter;
           } else {
-            let value = props[generatedParameter.name]
+            let value = getConstructorValue(generatedParameter.type, props[generatedParameter.name]);
             if (value === undefined) {
               // NOTE: we removed the hosted Scene component, which needs (generatedParameter.type == "BabylonjsCoreEngine")
               // SceneOrEngine type is Scene
               if (generatedParameter.type.includes("BabylonjsCoreScene") || (generatedParameter.type === "any" && generatedParameter.name === "scene")) {
                 // MeshBuild.createSphere(name: string, options: {...}, scene: any)
                 // console.log('Assigning scene to:', type, generatedParameter)
-                value = scene
+                value = scene;
               }
             }
 

test/render.spec.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { AbstractMesh, Color4, Engine, NullEngine, Scene, Vector3 } from "@babylonjs/core";
+import { AbstractMesh, ArcRotateCamera, Camera, Color4, Engine, NullEngine, Scene, Vector3 } from "@babylonjs/core";
 import sinon from "sinon";
 import assert from 'assert';
 
 import { Container } from "../src/ReactBabylonJSHostConfig";
 import { createReconciler, ReconcilerInstance } from '../src/render';
 import { SceneContext } from '../src/hooks/scene';
+import { CustomPropsHandler, PropChangeType } from '../src/PropsHandler';
 
 describe(' > Reconciler/Render tests', function testSuite() {
 
@@ -71,7 +72,72 @@ describe(' > Reconciler/Render tests', function testSuite() {
     const box: AbstractMesh | undefined = container.scene.meshes.find(m => m.name === 'box');
     assert.ok(box !== undefined)
     assert.strictEqual('boxMat', box.material.name);
+  })
 
+  it('Should transform registered Vector3 conversion from array.', async function test() {
+    class CustomVector3ArrayHandler {
+      get name() {
+        return `test:Vector3Array`
+      }
+    
+      get propChangeType() {
+        return PropChangeType.Vector3;
+      }
+    
+      accept(newProp) {
+        // console.log('Vector3: newProp:', newProp, Array.isArray(newProp));
+        return Array.isArray(newProp);
+      }
+    
+      process(oldProp, newProp) {
+        if (oldProp === undefined || oldProp.length !== newProp.length) {
+          // console.log(`found diff length (${oldProp?.length}/${newProp?.length}) Color3Array new? ${oldProp === undefined}`)
+          return {
+            processed: true,
+            value: Vector3.FromArray(newProp)
+          };
+        }
+    
+        for (let i = 0; i < oldProp.length; i++) {
+          if (oldProp[i] !== newProp[i]) {
+            // console.log('found difference...', oldProp, newProp);
+            return {
+              processed: true,
+              value: Vector3.FromArray(newProp)
+            };
+          }
+        }
 
+        // console.log('not processed...');
+        return {processed: false, value: null};
+      }
+    }
+    CustomPropsHandler.RegisterPropsHandler(new CustomVector3ArrayHandler());
+
+    const container: Container = getRootContainerInstance();
+    const reconciler: ReconcilerInstance = createReconciler({});
+
+    const sceneGraph = (
+      <SceneContext.Provider value={{
+        scene: container.scene,
+        sceneReady: true
+      }}>
+          <arcRotateCamera name='camera1' alpha={0} beta={Math.PI / 3} radius={10} target={[0, 1, 0] as any as Vector3} />
+          <hemisphericLight name='light1' direction={Vector3.Up()} />
+          <box
+            name="box"
+            size={2}
+            position={new Vector3(0, 1.2, 0)}
+          >
+            <standardMaterial name='boxMat' />
+          </box>
+      </SceneContext.Provider>
+    )
+    reconciler.render(sceneGraph, container, () => { /* empty for now */ }, null)
+
+    const camera: Camera | undefined = container.scene.cameras.find(c => c.name === 'camera1');
+    assert.ok(camera !== undefined);
+    assert.ok(camera instanceof ArcRotateCamera, 'Should be ArcRotateCamera');
+    assert.ok(Vector3.Up().equals(camera.target), 'should be the same as Vector3.Up');
   })
 })