Add ability to use multiple Facets of the same type

[edsilv]

e.g.

<Entity>
  <Image src="https://example.com/img1.jpg" width="100" height="150" position={[0, 0, 0]} />
  <Image src="https://example.com/img2.jpg" width="10" height="10" position={[90, 10, 0]} />
  <ThreeView>
    <mesh></mesh>
  </ThreeView>
</Entity>

Will require a way to query for multiple facets, e.g.

query.loop([ThreeView, [Image]], (e, [view, image]) => {
    });

Or potentially, Facet could inherit from React.Component to allow children?

<ImageFacet>
  <image one>
  <image two>
</ImageFacet>

[edsilv]

Will need some knowledge of mapped types in order to implement arrays of types in queries.

[Honga1]

@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.

[dustinlacewell]

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.