Open edsilv opened 3 years ago
Will need some knowledge of mapped types in order to implement arrays of types in queries.
@edsilv
I came across the same issue today. This is how I worked my way around it:
export class BoundingBoxes extends Facet<BoundingBoxes> {
children?: ReactNode
public readonly meta: {
children: Set<BoundingBox>
} = { children: new Set() }
override render() {
super.render()
this.meta.children = new Set()
const children = Children.map(this.props.children, (child) => {
if (isValidElement(child)) {
return cloneElement(child, {
ref: (ref: BoundingBox | null) => {
if (ref !== null) this.meta.children.add(ref)
},
})
}
})
return children
}
}
// elsewhere
(<Entity>
<BoundingBoxes>
<BoundingBox from={wristRef} to={humerusRef} />
<BoundingBox from={humerusRef} to={shoulderRef} />
<BoundingBox from={wristRef} to={indexFingerTipRef} />
</BoundingBoxes>
</Entity>)
Needs a bit of a clean up. But does the job fine. I just ask for Boxes
instead of Box
in my query.
I have some code I started in order to support this but haven't finished it.
@Honga1 Would love to know what you're doing with react-ecs and any feedback you might have.
e.g.
Will require a way to query for multiple facets, e.g.
Or potentially, Facet could inherit from
React.Component
to allow children?