add GizmoManager support #151

add Gizmo custom properties

src/CustomProps.ts

@@ -72,9 +72,19 @@ export type VRExperienceHelperCustomProps = {
   enableInteractions?: boolean
 } & CustomProps;
 
+/**
+ * Custom Gizmo props used for declaratively attaching.
+ */
+ export type GizmoCustomProps = {
+  attachGizmoToNode?: boolean
+  attachGizmoToMesh?: boolean
+  skipAutoAttach?: boolean
+  skipUtilityLayerAttach?: boolean
+} & CustomProps;
 
 /**
  * The below Custom Props are added explicitly and not automatically by inheritance, so do not need union type "& CustomProps"
+ * These are more useful when applicalbe to only part of the inheritance chain.
  */
 
 
@@ -85,6 +95,9 @@ export type ADTCustomProps = {
   createForParentMesh?: boolean
 };
 
+/**
+ * This is a subset of the EffectLayer classes.
+ */
 export type GlowLayerCustomProps = {
   /**
    * Adds all child nodes to the glow layer.
@@ -106,4 +119,4 @@ export type VirtualKeyboardCustomProps = {
 /**
  * A union of all CustomProps as a convenience typing and easier maintenance in other areas of code (ie: CreatedInstance and HostConfig)
  */
-export type AnyCustomProps = CustomProps & (AbstractMeshCustomProps & ADTCustomProps & Control3DCustomProps & GlowLayerCustomProps & VirtualKeyboardCustomProps & ShadowGeneratorCustomProps & MaterialCustomProps)
+export type AnyCustomProps = CustomProps & (AbstractMeshCustomProps & ADTCustomProps & Control3DCustomProps & GizmoCustomProps & GlowLayerCustomProps & VirtualKeyboardCustomProps & ShadowGeneratorCustomProps & MaterialCustomProps)

src/ReactBabylonJSHostConfig.ts

@@ -357,7 +357,10 @@ const ReactBabylonJSHostConfig: HostConfig<
       disposeInstanceOnUnmount: props.assignFrom === undefined,
       addIncludeOnlyChildren: props.addIncludeOnlyChildren === true,
       childMeshesNotTracked: props.childMeshesNotTracked === true,
-      shadowCastChildren: props.shadowCastChildren
+      shadowCastChildren: props.shadowCastChildren,
+      skipAutoAttach: props.skipAutoAttach,
+      attachGizmoToMesh: props.attachGizmoToMesh,
+      attachGizmoToNode: props.attachGizmoToNode,
     };
 
     if (customProps.assignFrom !== undefined) {

src/customHosts/GizmoLifecycleListener.ts

@@ -1,34 +1,49 @@
-import { Gizmo } from '@babylonjs/core/Gizmos/gizmo';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
+import { Gizmo } from '@babylonjs/core/Gizmos/gizmo.js';
 
 import { CreatedInstance } from '../CreatedInstance';
+import { GizmoCustomProps } from '../CustomProps';
 import BaseLifecycleListener from './BaseLifecycleListener';
 
-export default class GizmoLifecycleListener extends BaseLifecycleListener<Texture, any> {
-  onMount(instance: CreatedInstance<Texture>) {
-    const gizmo = instance.hostInstance as any as Gizmo;
-
-    let tmp: CreatedInstance<any> | null = instance.parent;
-    let foundUtilityLayerRender = false;
-    while (tmp !== null) {
-      if (tmp.metadata && tmp.metadata.isUtilityLayerRenderer === true) {
-        gizmo.gizmoLayer = tmp.hostInstance;
-        foundUtilityLayerRender = true;
-        break;
+export default class GizmoLifecycleListener extends BaseLifecycleListener<Gizmo, any> {
+  onMount(instance: CreatedInstance<Gizmo>) {
+    const gizmo = instance.hostInstance!;
+    const gizmoProps: GizmoCustomProps = instance.customProps;
+
+    if (gizmoProps.skipUtilityLayerAttach !== true) {
+      let tmp: CreatedInstance<any> | null = instance.parent;
+
+      let foundUtilityLayerRender = false;
+      while (tmp !== null) {
+        if (tmp.metadata && tmp.metadata.isUtilityLayerRenderer === true) {
+          gizmo.gizmoLayer = tmp.hostInstance;
+          foundUtilityLayerRender = true;
+          break;
+        }
+        tmp = tmp.parent;
+      }
+
+      if (foundUtilityLayerRender !== true) {
+        console.warn('utility layer not found (if intentional use skipUtilityLayerAttach)');
       }
-      tmp = tmp.parent;
     }
 
-    if (foundUtilityLayerRender !== true) {
-      console.error('utility layer not found (not attaching to mesh)');
-    } else {
-      // TODO: determine if we are searching for a Mesh or Node to attach to.
+    console.log('skipAutoAttach:', gizmoProps.skipAutoAttach);
+
+    if (gizmoProps.skipAutoAttach !== true || (gizmoProps.attachGizmoToMesh !== false && gizmoProps.attachGizmoToNode !== false)) {
+      const searchType = gizmoProps.attachGizmoToMesh === undefined && gizmoProps.attachGizmoToNode === undefined
+        ? 'node' // default with no attach preference specified.
+        : gizmoProps.attachGizmoToNode === true ? 'node' : 'mesh';
+
       let tmp: CreatedInstance<any> | null = instance.parent;
       while (tmp !== null) {
-        if (tmp.metadata && tmp.metadata.isMesh === true) {
+        if (searchType === 'mesh' && tmp.metadata && tmp.metadata.isMesh === true) {
           gizmo.attachedMesh = tmp.hostInstance;
           break;
         }
+        if (searchType === 'node' && tmp.metadata && tmp.metadata.isNode === true) {
+          gizmo.attachedNode = tmp.hostInstance;
+          break;
+        }
         tmp = tmp.parent;
       }
     }

src/customHosts/GizmoManagerLifecycleListener.ts

@@ -0,0 +1,21 @@
+import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager.js';
+
+import { CreatedInstance } from '../CreatedInstance';
+import BaseLifecycleListener from './BaseLifecycleListener';
+
+export default class GizmoManagerLifecycleListener extends BaseLifecycleListener<GizmoManager, any> {
+
+  onChildAdded(child: CreatedInstance<any>, parent: CreatedInstance<any>): void {
+    console.log('child added to gizmomanager', child);
+    const gizmoManager: GizmoManager = parent.hostInstance! as GizmoManager;
+    // TODO: check usePointerToAttachGizmos?
+    if (child.metadata && child.metadata.isGizmo !== true) {
+      console.log('attaching to gizmo manager')
+      if (child.metadata.isNode === true) {
+        gizmoManager.attachToNode(child.hostInstance);
+      } else if (child.metadata.isMesh === true) {
+        gizmoManager.attachToMesh(child.hostInstance);
+      }
+    }
+  }
+}

src/customHosts/index.ts

@@ -22,4 +22,5 @@ export { default as FallbackLifecycleListener } from './FallbackLifecycleListene
 export { default as ViewportLifecycleListener } from './ViewportLifecycleListener';
 export { default as EngineViewLifecycleListener} from './EngineViewLifecycleListener';
 export { default as AbstractMeshLifecycleListener} from './AbstractMeshLifecycleListener';
-export { default as GizmoLifecycleListener} from './GizmoLifecycleListener';
+export { default as GizmoLifecycleListener} from './GizmoLifecycleListener';
+export { default as GizmoManagerLifecycleListener} from './GizmoManagerLifecycleListener';