Use "react-router" in examples

examples/node.tsx

@@ -1,15 +1,26 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import terminalImage from 'terminal-image';
 import config, { Canvas, GlobalFonts } from '@napi-rs/canvas';
 import { render } from '../src/render';
 import { Group, Text, Rect, Image } from '../src';
+import {
+	RouterProvider,
+	createMemoryRouter,
+	useNavigate,
+} from 'react-router-dom';
 
 GlobalFonts.registerFromPath(
 	'/Users/nrajlich/Downloads/NINTENDOSWITCHUI.TTF',
 	'Switch Font',
 );
 
 function App() {
+	const [r, setR] = useState(0);
+	useEffect(() => {
+		setInterval(() => {
+			setR((v) => v + 1);
+		}, 33.3);
+	}, []);
 	return (
 		<>
 			{/*
@@ -29,28 +40,58 @@ function App() {
 				fill='red'
 				stroke='green'
 				lineWidth={8}
+				rotate={r}
 				onClick={console.log}
 			/>
 		</>
 	);
 }
 
-const canvas = new Canvas(800, 800);
-const root = render(<App />, canvas, config);
-const ev = new EventTarget();
-canvas.addEventListener = ev.addEventListener.bind(ev);
-canvas.removeEventListener = ev.removeEventListener.bind(ev);
-canvas.dispatchEvent = ev.dispatchEvent.bind(ev);
-await root;
-//await root;
-console.log('p');
-root.proxyEvents();
-canvas.dispatchEvent(
-	Object.assign(new Event('click'), {
-		layerX: 15,
-		layerY: 15,
-	}),
-);
+function Foo() {
+	const navigate = useNavigate();
+	useEffect(() => {
+		setTimeout(() => {
+			navigate('/');
+		}, 1000);
+	}, []);
+	return (
+		<Text fontSize={100} fontFamily='Geist' fill='white'>
+			test
+		</Text>
+	);
+}
+
+const routes = [
+	{
+		path: '/',
+		element: <App />,
+		//loader: () => FAKE_EVENT,
+	},
+	{
+		path: '/foo',
+		element: <Foo />,
+		//loader: () => FAKE_EVENT,
+	},
+];
+
+const router = createMemoryRouter(routes, {
+	initialEntries: ['/', '/foo'],
+	initialIndex: 1,
+});
+
+const canvas = new Canvas(800, 500);
+const root = render(<RouterProvider router={router} />, canvas, config);
+
+// Hide cursor
+process.stdout.write('\x1B[?25l');
+
+root.addEventListener('render', async () => {
+	const buffer = canvas.toBuffer('image/png');
+	const i = await terminalImage.buffer(buffer, { height: 30 });
+	process.stdout.write(`\x1B[2J\x1B[2;2H${i}`);
+});
 
-const buffer = canvas.toBuffer('image/png');
-console.log(await terminalImage.buffer(buffer, { height: 45 }));
+process.on('exit', () => {
+	// Show cursor
+	process.stdout.write('\x1B[?25h');
+});

package.json

@@ -38,6 +38,7 @@
     "jest-image-snapshot": "^6.4.0",
     "react": "^18.2.0",
     "react-fps": "^1.0.6",
+    "react-router-dom": "^6.23.0",
     "terminal-image": "^2.0.0",
     "tsx": "^4.7.0",
     "typescript": "^5.2.2",

src/events.ts

@@ -171,7 +171,6 @@ export function proxyEvents(
 			}
 
 			if (mouseCurrentlyOver) {
-
 				// do "mouseleave" event
 				mouseCurrentlyOver.dispatchEvent(
 					cloneMouseEvent(

src/test.tsx

@@ -1,5 +1,10 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { render } from './render';
+import React, { useEffect, useRef, useState } from 'react';
+import { render } from './render.js';
+import {
+	RouterProvider,
+	createMemoryRouter,
+	useNavigate,
+} from 'react-router-dom';
 import {
 	Circle,
 	Group,
@@ -11,7 +16,7 @@ import {
 	Path,
 	RoundRectProps,
 	RoundRect,
-} from './index';
+} from './index.js';
 const canvas = document.getElementById('c') as HTMLCanvasElement;
 
 const randomColor = () =>
@@ -29,6 +34,12 @@ function Button({ children, ...props }: RoundRectProps & { children: string }) {
 	const rectRef = useRef();
 	const [hover, setHover] = useState(false);
 	const [textPos, setTextPos] = useState({ x: 0, y: 0 });
+	useEffect(() => {
+		return () => {
+			// @ts-ignore
+			root.ctx.canvas.style.cursor = 'unset';
+		};
+	}, []);
 	return (
 		<>
 			<RoundRect
@@ -44,9 +55,9 @@ function Button({ children, ...props }: RoundRectProps & { children: string }) {
 					// @ts-ignore
 					root.ctx.canvas.style.cursor = 'unset';
 				}}
-				onClick={() => {
-					console.log('click!');
-				}}
+				//onClick={() => {
+				//	console.log('click!');
+				//}}
 				ref={(ref) => {
 					if (!ref || rectRef.current) return;
 					// @ts-ignore
@@ -72,7 +83,20 @@ function Button({ children, ...props }: RoundRectProps & { children: string }) {
 	);
 }
 
+function Link({ to, children }: React.PropsWithChildren<{ to: string }>) {
+	const navigate = useNavigate();
+	return React.Children.map(children, (child) => {
+		if (child == null || typeof child !== 'object') return child;
+		return React.cloneElement(child, {
+			onClick() {
+				navigate(to);
+			},
+		});
+	});
+}
+
 function App() {
+	const navigate = useNavigate();
 	const [r, setR] = useState(0);
 	const [pos, setPos] = useState({ x: 0, y: 0 });
 	useEffect(() => {
@@ -97,16 +121,18 @@ function App() {
 					setPos({ x: touch.clientX - 200, y: touch.clientY - 150 });
 				}}
 			></Rect>
-			<Button
-				x={400}
-				y={200}
-				width={150}
-				height={75}
-				radii={30}
-				fill='rgb(250, 250, 250)'
-			>
-				Button
-			</Button>
+			<Link to='/page2'>
+				<Button
+					x={400}
+					y={200}
+					width={150}
+					height={75}
+					radii={30}
+					fill='rgb(250, 250, 250)'
+				>
+					Button
+				</Button>
+			</Link>
 		</>
 	);
 }
@@ -248,16 +274,57 @@ function App() {
 //	);
 //}
 
-document.body.onclick = (e) => {
-	console.log('body', e.offsetX, e.offsetY);
-};
+//document.body.onclick = (e) => {
+//	console.log('body', e.offsetX, e.offsetY);
+//};
+//
+//document.body.ontouchmove = (e) => {
+//	console.log(e.target);
+//};
+//
+//document.getElementById('parent')!.ontouchstart = (e) => {
+//	console.log(e);
+//};
+
+function Page2() {
+	return (
+		<>
+			<Rect fill='#111' width='100%' height='100%' />
+			<Text fill='white' fontFamily='Geist'>
+				Page 2
+			</Text>
+			<Link to='/'>
+				<Button
+					x={30}
+					y={50}
+					width={150}
+					height={75}
+					radii={30}
+					fill='rgb(250, 250, 250)'
+				>
+					Go back
+				</Button>
+			</Link>
+		</>
+	);
+}
 
-document.body.ontouchmove = (e) => {
-	console.log(e.target);
-};
+const routes = [
+	{
+		path: '/',
+		element: <App />,
+		//loader: () => FAKE_EVENT,
+	},
+	{
+		path: '/page2',
+		element: <Page2 />,
+		//loader: () => FAKE_EVENT,
+	},
+];
 
-document.getElementById('parent')!.ontouchstart = (e) => {
-	console.log(e);
-};
+const router = createMemoryRouter(routes, {
+	//initialEntries: ['/', '/foo'],
+	//initialIndex: 0,
+});
 
-render(<App />, canvas);
+render(<RouterProvider router={router} />, canvas);