The real question is how to use it with storybook? The problem is the storybook co

Related <a class="issue-link js-issue-link" data-error-text="Failed to load title" dat

I tried to add following <div class="highlight highlight-text-html-basic notransla

Explicit preview-head.html works preview-head.html as in docs <a href="https://sto

How the pixi is detected about pixi-inspector HOT 4 CLOSED

bfanger commented on August 28, 2024

How the pixi is detected

from pixi-inspector.

Comments (4)

kresli commented on August 28, 2024

Would be nice if extension would have iframe selector

from pixi-inspector.

kresli commented on August 28, 2024

Related #34

from pixi-inspector.

kresli commented on August 28, 2024

I tried to add following

<script>
  window.addEventListener("load", () => {
    const frame = document.getElementById("storybook-preview-iframe");
    const PIXI = frame.contentWindow.PIXI;
    setTimeout(() => {
      window.__PIXI_INSPECTOR_GLOBAL_HOOK__ &&
        window.__PIXI_INSPECTOR_GLOBAL_HOOK__.register({ PIXI: PIXI });
    }, 3000);
  });
</script>

I load unpacked extension and seems like PIXI is detected

but the inspector still looking for pixi.js

from pixi-inspector.

kresli commented on August 28, 2024

Explicit preview-head.html works
preview-head.html as in docs https://storybook.js.org/docs/configurations/add-custom-head-tags/

<body>
  <div id="pixi-canvas"></div>
  <script src="./pixi.js/dist/pixi.js"></script>
  <script>
    console.log(window);
    const app = new PIXI.Application({ antialias: true });
    document.getElementById("pixi-canvas").appendChild(app.view);
    console.log(document.getElementById("pixi-canvas"));

    const graphics = new PIXI.Graphics();

    // Rectangle
    graphics.beginFill(0xde3249);
    graphics.drawRect(50, 50, 100, 100);
    graphics.endFill();
    app.stage.addChild(graphics);
  </script>
</body>

Also I can confirm create application inside any files picked by webpack works.
I suspect the wrapper which I'm using causing the issue https://github.com/michalochman/react-pixi-fiber. Closing the issue.

from pixi-inspector.

Recommend Projects