Observables and Events about vue-babylonjs HOT 6 CLOSED

Found a sweet way to implement this functionality. Vue has support for reading the $listeners property on a component, so I can leverage this to allow for attributes in the form of @on-some-observable which removes the necessity to have this as part of the Property component.

Additionally after a bit of digging I found that a vast majority of observables in Babylonjs (literally everything except for the VRExperienceHelper class) have the naming convention where they start with on and end with Observable, so my plan is to implement this in the following manner:

• attributes in the form @some-name$ would become an observer using the onSomeNameObservable property on the underlying Babylonjs object. the listener will attempt to find a matching observable on the underlying object and in the event that one does not exist will attempt to match one on the scene.
• attributes in the form @on-some-name-observable will become onSomeNameObservable and will check if an observer with that name exists only on the underlying Babylonjs object and will not attempt to match one on the scene (this is to account for custom events created by consumers of this library).

Things I haven't yet figured out:

• how to handle the addOnce observer type. Vue does offer a .once modifier that does extend to custom events, but the observer would still exist. More experimentation is necessary to determine if this will work
• how to dynamically remove observers. I don't know if it is completely necessary to support this.
• how to handle any of the methods requiring an observer reference by the end consumer. I'm thinking I may leave this as an exercise to the developer to get a reference through the object itself.

I think this implementation will cover a majority of use-cases regarding observables in a clean and powerful manner. I will likely be creating an issue or pull request with Babylonjs to formalize the naming convention and clean up the remnants of observables in the VRExperienceHelper class that don't follow this convention. Luckily the VRExperienceHelper does not have a specific implementation in this library yet.

from vue-babylonjs.

Thanks! Yeah I haven't gotten to event integration yet, but it would be nice to have; especially with camera control events linked to vue's keybindings. There is an event bus setup on the Entity component for passing state between parent and child and even a Scene bus for interacting with the root Scene. I am unsure if leveraging that system and relying on the Entity mixin functionality would be better, or using Vue's built-in event functionality. Let me know what you're thinking if you get a chance to look over the Entity mixin functionality and bus system.

Edit
After thinking a bit about this, another option is adding an observable, event, or function type to the Property component. That may be a little more future-proof when more observable types are added and a little more flexible by enabling this for all component-types at once. The other option is to put together an Event, or Observable component. Not sure what is best here. Maybe you have some arguments one way or another?

from vue-babylonjs.

Do we have a timeline of when this feature will be released? I would love to be able to have access to events.

from vue-babylonjs.

I can look into it soon since I'm currently blocked by Babylonjs on the Loader stuff. I was hoping for a bit of feedback though. Would you say that an observable, event, or function prop added to the Property component would be an alright pattern for this?

from vue-babylonjs.

Yes, at least for my use case, I think adding an observable, event, or function prop would be a good pattern.

from vue-babylonjs.

This is now live. See the Observable documentation for details

from vue-babylonjs.