[v8][Pixi-UI] FancyButton intergration with onPress event

[furic]

I'm experimenting with Pixi-React v8 and Pixi-UI. I've managed to display a FancyButton, but I’m having trouble getting the onPress event to trigger. Any guidance would be greatly appreciated!

In plain TypeScript, the code would look like this:

const button = new FancyButton({...});
button.onPress.connect(() => console.log('Button pressed!'));

However, I'm not sure how to access the button or properly connect the signal in Pixi-React v8. Since it's still in early stages and documentation is limited, I'm a bit stuck.

Here’s my full code:

import { Application, extend, useAssets } from "@pixi/react";
import { Sprite, Text } from "pixi.js";
import { FancyButton } from "@pixi/ui";
import { Signal } from "typed-signals";

extend({ Sprite, Text, FancyButton });

const App = () => {
	const {
		assets: [buttonTexture, buttonHoverTexture, buttonPressedTexture],
		isSuccess,
	} = useAssets([
		"assets/button.png",
		"assets/button_hover.png",
		"assets/button_pressed.png",
	]);

	let buttonOnPressSignal = new Signal<() => void>();
	buttonOnPressSignal.connect(() => console.log("Button pressed!"));

	const buttonDefaultSprite = new Sprite({ texture: buttonTexture });
	const buttonHoverSprite = new Sprite({ texture: buttonHoverTexture });
	const buttonPressedSprite = new Sprite({ texture: buttonPressedTexture });
	const buttonText = new Text({
		text: "Start",
		style: { fill: "#FFFFFF", fontSize: 50 },
	});

	return (
		<Application width={1200} height={675}>
			{isSuccess && (
				<fancyButton
					defaultView={buttonDefaultSprite}
					hoverView={buttonHoverSprite}
					pressedView={buttonPressedSprite}
					textView={buttonText}
					x={600}
					y={337.5}
					width={200}
					height={80}
					anchorX={0.5}
					anchorY={0.5}
					// onPress={() => {console.log('Button pressed!');}}
					onPress={buttonOnPressSignal}
				/>
			)}
		</Application>
	);
};

export default App;

Any help on how to properly connect the onPress event in Pixi-React would be fantastic!

P.S. I also noticed the Pixi-React Discord link is broken, so I haven't been able to join the channel.

[SepantaJoshani]

I'm relatively new to PixiJS and currently using version 7. I encountered an issue whereonpointerdown wasn't firing. Installing @pixi/events to my project or simply including import "@pixi/events"; at the top of the related file resolved the problem for me. I'm not sure if this will work for your case, but I hope it helps!

[delhoume]

I have not been able to make
button.onPress.connect(() => { xxx; });

react to finger click on touchscreen (Lenovo laptop)
onPress functon is called for mouse click.
a simple Slider works in both touchscreen and mouse modes.

not using React but I guess it is the same behaviour.

All storybooks (Fancy)Buttonon Pixi web site have the same issue.

"dependencies": {
"@esotericsoftware/spine-pixi-v8": "^4.2.74",
"@pixi/layout": "^3.0.2",
"@pixi/sound": "^6.0.1",
"@pixi/ui": "^2.2.2",
"motion": "^12.4.7",
"pixi-filters": "^6.1.3",
"pixi-game-camera": "^1.0.2",
"pixi-viewport": "^6.0.3",
"pixi.js": "^8.8.1"