Can't get pointer events to work

Whatever I try, I can’t get pointer events to work when adding an SVGScene to the stage. Whatever else I add to the stage works interactively fine and also the stage itself fires events just fine, but for some reason not the SVG Scene. Interactive of the scene is set to true tho (also tried buttonMode just to be sure)

I tried several event types, like pointerup, tap and click. Also tried both .on() and .addListener() on both the SVGScene object (which is extended from DisplayObject) as well as the svgScene.root just to be sure.

Also created a complete fresh project with only pixi in it, just a stage and only the SVGScene added to it. But nothing seems to work.

According to the docs the events should be supported, so I don’t get this.

Is there anything we should know, other than settings interactive to true, to make interactivity with pointers work?

[ShukantPal]

Hmm I updated the pen with the prototype modification. The prototype isn’t supposed to have the worldTransform - it is the instantiated object / SVGScene that has it.

Make sure you’re not using arrow functions as they hard set the this.

I’ll add containsPoint later tonight.

[ShukantPal]

So the child problem is kind of why I didn’t want to add a “default” way of implementing interactivity. Although @pixi-essentials/svg does provide a scene graph, it’s a “disconnected” internal scene. The scene graph is an “implementation detail”. Usually, if you are rendering an arbitrary SVG file — this won’t be an issue (pun intended). That does means the this.root is not a child of SVGScene, and it’s protected from the outside.

The reason behind this is to give you performance optimization out of the box:

• The scene is automatically culled on each render.
• The transform matrices are not recalculated if they didn’t change at the root.

Back to adding interactivity, there are a couple of ways to go about this:

1. Since the “root” node is disconnected from the SVGScene, you could treat the SVGScene as a factory:

import { SVGScene } from '@pixi-essentials/svg';

const stage;
const scene = new SVGScene(svgsvgElement);

stage.addChild(scene['root']);

You loose the performance optimizations described earlier, but they might not matter if you need hit testing inside the scene already.

1. Create an interaction bridge.

You can use PixiJS’ TreeSearch to do hit testing for you on the “root” of inside all SVGScene events.

// TODO: Convert to factory format and reuse code for other events

const scene = new SVGScene(el);
const treeSearch = new TreeSearch();

scene.on('pointerdown', (e) => {
  // Note: Use a different event object
  treeSearch.hitTest(..., (nextEvent) => {
    nextEvent.target?.emit('pointerdown', nextEvent);
  });
);
});

The new EventSystem has better support for this. Here, you’d have to check if the target object changed between pointerdown and pointerup before emitting a click event.

With this method, you could use a faster hit testing algorithm if you know parts of the scene you don’t want to search through or if you want to use something like a spatial hash cause the SVG tree is huge.