children doesn't respect parents position

[kresli]

const Rect = CustomPIXIComponent<
  PIXI.Graphics,
  {
    fill: number;
    x: number;
    y: number;
    width: number;
    height: number;
  }
>(
  {
    customDisplayObject: (props) => new PIXI.Graphics(),
    customApplyProps: function (instance, oldProps, newProps) {
      const { fill, x, y, width, height } = newProps;
      instance.clear();
      instance.beginFill(fill);
      instance.drawRect(x, y, width, height);
      instance.endFill();
    },
  },
  "Rect"
);

export function App() {
  const { observe, width, height } = useResizeObserver(100, 100);
  return (
    <div ref={observe} style={{ width: "100vw", height: "100vh" }}>
      <Stage options={{ backgroundColor: 0x10bb99, height, width }}>
        <Rect fill={0xff0000} height={50} width={300} x={100} y={100}>
          <Rect fill={0xff00ff} height={50} width={100} x={0} y={0}></Rect>
        </Rect>
      </Stage>
    </div>
  );
}

I would expect Rect inside Rect would respect parent position but that's not happening. Is there a way how to force such behaviour? See the image for current behavoiur

const Rect = CustomPIXIComponent<
  PIXI.Graphics,
  {
    fill: number;
    x: number;
    y: number;
    width: number;
    height: number;
  }
>(
  {
    customDisplayObject: (props) => new PIXI.Graphics(),
    customApplyProps: function (instance, oldProps, newProps) {
      const { fill, x, y, width, height } = newProps;
      instance.clear();
      instance.beginFill(fill);
      instance.drawRect(x, y, width, height);
      instance.endFill();
    },
  },
  "Rect"
);

export function App() {
  const { observe, width, height } = useResizeObserver(100, 100);
  return (
    <div ref={observe} style={{ width: "100vw", height: "100vh" }}>
      <Stage options={{ backgroundColor: 0x10bb99, height, width }}>
        <Rect fill={0xff0000} height={50} width={300} x={100} y={100}>
          <Rect fill={0xff00ff} height={50} width={100} x={0} y={0}></Rect>
        </Rect>
      </Stage>
    </div>
  );
}

I would expect Rect inside Rect would respect parent position but that's not happening. Is there a way how to force such behaviour?
here is the current output

[michalochman]

Hi @kresli, in the way customApplyProps is implemented here, the props (e. g. x and y) are no longer passed to to PIXI, it is just using them to draw the graphics object.

See a note in README: https://github.com/michalochman/react-pixi-fiber#customapplypropsdisplayobject-oldprops-newprops-optional

You probably want to additionally call at the end of customApplyProps:

this.applyDisplayObjectProps(oldProps, newProps)

or maybe:

this.applyDisplayObjectProps({ x: oldProps.x, y: oldProps.y }, { x: newProps.x, y: newProps.y })

This will most likely require you to call drawRect at 0, 0 position instead, to only use x and y as DisplayObject position property.