)[key] = value;
}
- lastLoadedSource.current = { two: null, key: null };
- svg.remove(svg.children);
- };
- }, [two, src, content, svg]);
-
- return (
-
-
-
- {renderChildren()}
-
-
-
- );
- }
-);
+ if (!two.playing) two.update();
+ try { callbacks.current.onLoad?.(svg, elements); }
+ catch (error) { console.error('[react-two.js] Error in SVG onLoad callback:', error); }
+ });
+ };
+
+ if (src && content) {
+ console.warn('[react-two.js] SVG has both src and content; using src.');
+ }
+ if (src) {
+ void (async () => {
+ try {
+ const response = await fetch(src, { signal: controller.signal });
+ if (!response.ok) throw new Error(`Failed to load SVG: HTTP ${response.status}`);
+ interpret(await response.text());
+ } catch (error) {
+ reportError(error);
+ }
+ })();
+ } else {
+ try {
+ if (!content) throw new Error('SVG requires either src or content');
+ interpret(content);
+ } catch (error) {
+ reportError(error);
+ }
+ }
+
+ return () => {
+ active = false;
+ controller.abort();
+ svg.remove(imported);
+ if (importedChildren.current === imported) importedChildren.current = [];
+ releaseImportedResources(two, owned);
+ if (!two.playing && two.renderer.domElement.isConnected) two.update();
+ };
+ }, [two, src, content, shallow, svg]);
+
+ return (
+
+
+
+ {renderChildren()}
+
+
+
+ );
+});
diff --git a/lib/useTwoObject.ts b/lib/useTwoObject.ts
index aa448a5..c9c4f5e 100644
--- a/lib/useTwoObject.ts
+++ b/lib/useTwoObject.ts
@@ -424,20 +424,22 @@ export function useTwoObject<
}
});
- // Event handler registration and cleanup
- useEffect(() => {
+ // Updating callbacks must not unregister the object: doing so would discard
+ // hover and pointer capture on ordinary React state updates during a drag.
+ useLayoutEffect(() => {
const eventItem = instance as unknown as Shape | Group;
if (Object.keys(eventHandlers).length > 0) {
registerEventShape(eventItem, eventHandlers, parent ?? undefined);
} else {
unregisterEventShape(eventItem);
}
-
- return () => {
- unregisterEventShape(eventItem);
- };
}, [instance, parent, eventHandlers, registerEventShape, unregisterEventShape]);
+ useEffect(() => {
+ const eventItem = instance as unknown as Shape | Group;
+ return () => unregisterEventShape(eventItem);
+ }, [instance, unregisterEventShape]);
+
// Cleanup on unmount (strict mode safe)
useEffect(() => {
return () => {
diff --git a/tests/browser/index.html b/tests/browser/index.html
new file mode 100644
index 0000000..6bd88ee
--- /dev/null
+++ b/tests/browser/index.html
@@ -0,0 +1,17 @@
+
+
+ react-two.js browser regressions
+
+ Renderer regression checks
+ Running…
+
+ Native pointer capture
+ Select a renderer, then drag the blue circle outside its renderer. Each drag must report capture, bubbled movement, and release.
+
+
+
+
+ Waiting for a drag.
+
+
+
diff --git a/tests/browser/regressions.tsx b/tests/browser/regressions.tsx
new file mode 100644
index 0000000..7477d5e
--- /dev/null
+++ b/tests/browser/regressions.tsx
@@ -0,0 +1,99 @@
+import { createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import Two from 'two.js';
+import { Canvas, Circle, Group, Rectangle, SVG, useTwo, type TwoEvent } from '../../lib/main';
+
+const results = document.querySelector('#results')!;
+const messages: string[] = [];
+function assert(condition: unknown, message: string): asserts condition {
+ if (!condition) throw new Error(message);
+}
+const frame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+let instance: Two | null = null;
+// This standalone test fixture is not a Fast Refresh component module.
+// eslint-disable-next-line react-refresh/only-export-components
+function Probe() { instance = useTwo().two; return null; }
+const root = createRoot(document.querySelector('#test-root')!);
+const variants = ['svg', 'SVGRenderer', 'canvas', 'CanvasRenderer', 'webgl', 'WebGLRenderer'] as const;
+async function run() {
+ for (const type of variants) {
+ const events: TwoEvent[] = [];
+ const mask = new Two.Circle(0, 0, 20);
+ const svg = createRef();
+ let resolveLoad!: () => void;
+ let rejectLoad!: (error: Error) => void;
+ const loaded = new Promise((resolve, reject) => { resolveLoad = resolve; rejectLoad = reject; });
+ flushSync(() => root.render());
+ await Promise.race([loaded, new Promise((_, reject) => setTimeout(() => reject(new Error(`${type}: SVG load timeout`)), 2000))]);
+ await frame();
+ const two = instance!;
+ assert(two, `${type}: mounted`);
+ const expected = /webgl/i.test(type) ? Two.Types.webgl : /canvas/i.test(type) ? Two.Types.canvas : Two.Types.svg;
+ assert(two.type === expected, `${type}: normalized type`);
+ two.update();
+ assert(svg.current?.children[0] instanceof Two.Circle, `${type}: shallow SVG import (children=${svg.current?.children.length}, class=${svg.current?.children[0]?.constructor.name})`);
+ const element = two.renderer.domElement;
+ const bounds = element.getBoundingClientRect();
+ const center = { clientX: Math.round(bounds.left + bounds.width / 4), clientY: Math.round(bounds.top + bounds.height / 4), bubbles: true };
+ element.dispatchEvent(new MouseEvent('click', center));
+ element.dispatchEvent(new WheelEvent('wheel', center));
+ assert(events.length === 2, `${type}: click and wheel bubble through group mask`);
+ for (const event of events) {
+ assert(Math.abs(event.point.x - (center.clientX - bounds.left) * 800 / bounds.width) < 0.01 && Math.abs(event.point.y - (center.clientY - bounds.top) * 600 / bounds.height) < 0.01, `${type}: CSS-scaled world point`);
+ assert(event.target instanceof Two.Rectangle, `${type}: actual leaf target`);
+ }
+ element.dispatchEvent(new MouseEvent('click', { ...center, clientX: center.clientX + 25 }));
+ assert(events.length === 2, `${type}: mask excludes outside geometry`);
+ messages.push(`PASS ${type}: real renderer, CSS coordinates, masked group events, shallow SVG`);
+ results.textContent = messages.join('\n');
+ }
+ root.unmount();
+ results.textContent = `${messages.join('\n')}\nALL 6 RENDERER VARIANTS PASSED`;
+}
+void run().catch((error) => { results.textContent = `${messages.join('\n')}\nFAIL ${String(error)}`; });
+
+const dragRoot = createRoot(document.querySelector('#drag-root')!);
+const dragResults = document.querySelector('#drag-results')!;
+function showDrag(type: 'svg' | 'canvas' | 'webgl') {
+ const log: string[] = [];
+ const record = (message: string) => { log.push(message); dragResults.textContent = log.join('\n'); };
+ let moved = false;
+ let bubbled = false;
+ const onDown = (event: TwoEvent) => {
+ const pointerId = (event.nativeEvent as PointerEvent).pointerId;
+ event.setPointerCapture(pointerId);
+ record(`CAPTURE ${type}: ${event.hasPointerCapture(pointerId)}; point ${Math.round(event.point.x)},${Math.round(event.point.y)}`);
+ };
+ const onMove = (event: TwoEvent) => {
+ if (event.hasPointerCapture((event.nativeEvent as PointerEvent).pointerId) && !moved) {
+ moved = true;
+ record(`MOVE ${type}: captured`);
+ }
+ };
+ const onUp = (event: TwoEvent) => {
+ const pointerId = (event.nativeEvent as PointerEvent).pointerId;
+ const point = event.point;
+ event.releasePointerCapture(pointerId);
+ record(`RELEASE ${type}: ${!event.hasPointerCapture(pointerId)}; point ${Math.round(point.x)},${Math.round(point.y)}`);
+ };
+ flushSync(() => dragRoot.render());
+ dragResults.textContent = `Ready for ${type}: drag the circle outside the grey renderer.`;
+}
+for (const type of ['svg', 'canvas', 'webgl'] as const) {
+ document.querySelector(`#${type}`)!.addEventListener('click', () => showDrag(type));
+}
+showDrag('svg');
diff --git a/tests/canvasOptions.test.tsx b/tests/canvasOptions.test.tsx
new file mode 100644
index 0000000..34a6622
--- /dev/null
+++ b/tests/canvasOptions.test.tsx
@@ -0,0 +1,100 @@
+import { createRef } from 'react';
+import { render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Two from 'two.js';
+import { Canvas, Circle, useTwo } from '../lib/main';
+
+let instance: Two | null;
+function Probe() {
+ instance = useTwo().two;
+ return null;
+}
+afterEach(() => { vi.restoreAllMocks(); vi.unstubAllEnvs(); });
+
+describe('Canvas constructor options', () => {
+ it.each(['svg', 'SVGRenderer', 'canvas', 'CanvasRenderer', 'webgl', 'WebGLRenderer'] as const)(
+ 'normalizes %s to the corresponding renderer constructor', (type) => {
+ // Real GPU initialization is exercised by tests/browser, not jsdom.
+ const webgl = vi.spyOn(Two, 'WebGLRenderer').mockImplementation(function(options) {
+ return new Two.CanvasRenderer(options);
+ } as unknown as typeof Two.WebGLRenderer);
+ const { container } = render();
+ const expected = /svg/i.test(type) ? Two.Types.svg : /webgl/i.test(type) ? Two.Types.webgl : Two.Types.canvas;
+ expect(instance?.type).toBe(expected);
+ expect(container.querySelector(/svg/i.test(type) ? 'svg' : 'canvas')).toBeTruthy();
+ expect(webgl).toHaveBeenCalledTimes(/webgl/i.test(type) ? 1 : 0);
+ },
+ );
+
+ it('updates logical size and play/pause without replacing the scene', () => {
+ const circle = createRef();
+ const view = (width: number, autostart: boolean) => (
+
+ );
+ const { rerender } = render(view(100, false));
+ const initial = instance;
+ const shape = circle.current;
+ rerender(view(200, true));
+ expect(instance).toBe(initial);
+ expect(circle.current).toBe(shape);
+ expect(instance?.width).toBe(200);
+ expect(instance?.playing).toBe(true);
+ rerender(view(200, false));
+ expect(instance?.playing).toBe(false);
+ });
+
+ it('warns for immutable changes and applies them on a key remount with cleanup', () => {
+ const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+ const view = (changed: boolean, key = 'original') => (
+
+ );
+ const { rerender, container } = render(view(false));
+ const old = instance!;
+ const oldElement = old.renderer.domElement;
+ rerender(view(true));
+ expect(instance).toBe(old);
+ for (const key of ['type', 'ratio', 'overdraw', 'smoothing', 'fullscreen']) {
+ expect(warn).toHaveBeenCalledWith(expect.stringContaining(`"${key}"`));
+ }
+ expect(container.querySelector('svg')).toBe(oldElement);
+ // Remount renderer options without enabling fullscreen for this unit test.
+ rerender();
+ expect(instance).not.toBe(old);
+ expect(Two.Instances).not.toContain(old);
+ expect(oldElement.isConnected).toBe(false);
+ expect(old.scene.children).toHaveLength(0);
+ expect(instance?.scene.children).toHaveLength(1);
+ });
+
+ it('removes fullscreen resize listeners and restores body styles on a key remount', () => {
+ const remove = vi.spyOn(window, 'removeEventListener');
+ const previousPosition = document.body.style.position;
+ const { rerender } = render();
+ const oldFit = instance!.fit;
+ expect(document.body.style.position).toBe('fixed');
+ document.body.style.backgroundColor = 'red';
+ rerender();
+ expect(remove).toHaveBeenCalledWith('resize', oldFit);
+ expect(document.body.style.position).toBe(previousPosition);
+ expect(document.body.style.backgroundColor).toBe('red');
+ document.body.style.backgroundColor = '';
+ });
+
+ it('treats equivalent aliases as unchanged', () => {
+ const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+ const { rerender } = render();
+ rerender();
+ expect(warn).not.toHaveBeenCalled();
+ });
+
+ it('suppresses constructor-change warnings in production', () => {
+ vi.stubEnv('NODE_ENV', 'production');
+ const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+ const { rerender } = render();
+ rerender();
+ expect(warn).not.toHaveBeenCalled();
+ });
+});
diff --git a/tests/eventSemantics.test.tsx b/tests/eventSemantics.test.tsx
new file mode 100644
index 0000000..8c95e56
--- /dev/null
+++ b/tests/eventSemantics.test.tsx
@@ -0,0 +1,292 @@
+import { createRef, memo } from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Two from 'two.js';
+import { Canvas, Circle, Group, Points, Rectangle, Text, type TwoEvent } from '../lib/main';
+
+const rect = { left: 10, top: 20, right: 410, bottom: 320, width: 400, height: 300, x: 10, y: 20, toJSON: () => ({}) };
+function renderer(container: HTMLElement) {
+ const element = container.querySelector('svg,canvas')!;
+ vi.spyOn(element, 'getBoundingClientRect').mockReturnValue(rect);
+ return element;
+}
+const inside = { clientX: 110, clientY: 95, pointerId: 1, button: 0 };
+const outside = { clientX: 390, clientY: 290, pointerId: 1, button: 0 };
+afterEach(() => vi.restoreAllMocks());
+
+// CSS renders 800x600 logical pixels in a 400x300 rectangle with a nonzero offset.
+describe.each(['SVGRenderer', 'CanvasRenderer'] as const)('%s event semantics', (type) => {
+ it('reports identical world coordinates and bubbles through noninteractive intermediate parents', () => {
+ const shape = createRef();
+ const group = createRef();
+ const onShape = vi.fn();
+ const onGroup = vi.fn();
+ const { container } = render();
+ const element = renderer(container);
+ fireEvent.click(element, inside);
+ fireEvent.pointerDown(element, inside);
+ fireEvent.wheel(element, { ...inside, deltaY: 5 });
+ expect(onShape).toHaveBeenCalledTimes(3);
+ expect(onGroup).toHaveBeenCalledTimes(3);
+ for (const [event] of onShape.mock.calls) {
+ expect(event.point).toEqual({ x: 200, y: 150 });
+ expect(event.target).toBe(shape.current);
+ expect(event.currentTarget).toBe(shape.current);
+ }
+ for (const [event] of onGroup.mock.calls) {
+ expect(event.point).toEqual({ x: 200, y: 150 });
+ expect(event.target).toBe(shape.current);
+ expect(event.currentTarget).toBe(group.current);
+ }
+ });
+
+ it('uses current nested scene order across memoized parent reorders', () => {
+ const left = vi.fn();
+ const right = vi.fn();
+ const Layer = memo(({ onClick }: { onClick: () => void }) => (
+
+ ));
+ const view = (reverse: boolean) => ;
+ const { container, rerender } = render(view(false));
+ const element = renderer(container);
+ fireEvent.click(element, inside);
+ expect(right).toHaveBeenCalledTimes(1);
+ expect(left).not.toHaveBeenCalled();
+ rerender(view(true));
+ fireEvent.click(element, inside);
+ expect(left).toHaveBeenCalledTimes(1);
+ expect(right).toHaveBeenCalledTimes(1);
+ });
+
+ it('targets actual child geometry for sparse groups and ignores transparent, invisible, and clipped content', () => {
+ const onClick = vi.fn();
+ const leaf = createRef();
+ const { container } = render();
+ const element = renderer(container);
+ fireEvent.click(element, inside); // Empty space in the group's aggregate bounds.
+ expect(onClick).not.toHaveBeenCalled();
+ fireEvent.click(element, { clientX: 60, clientY: 95 });
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(onClick.mock.calls[0][0].target).toBe(leaf.current);
+ });
+
+ it('clips hit geometry to transformed owner masks and excludes the mask itself', () => {
+ const onClick = vi.fn();
+ const mask = new Two.Circle(0, 0, 20);
+ const { container } = render();
+ const element = renderer(container);
+ fireEvent.click(element, inside);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ fireEvent.click(element, { clientX: 135, clientY: 95 }); // Inside rectangle, outside mask.
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it.each(['text', 'points'] as const)('ignores unpainted %s above an interactive shape while retaining painted hits', (kind) => {
+ const points = createRef();
+ const behind = vi.fn();
+ const front = vi.fn();
+ const view = (fill: string, stroke = 'none', linewidth = 1) => ;
+ const { container, rerender } = render(view('transparent'));
+ if (kind === 'points') {
+ // Two.js 0.8.24's Points bounds call Matrix.multiply with two arguments,
+ // which throws. Supply bounds to isolate paint filtering from that bug.
+ vi.spyOn(points.current!, 'getBoundingClientRect').mockReturnValue({
+ left: 180, right: 220, top: 130, bottom: 170, width: 40, height: 40,
+ });
+ }
+ const element = renderer(container);
+ fireEvent.click(element, inside);
+ rerender(view('none', 'red', 0));
+ fireEvent.click(element, inside);
+ expect(behind).toHaveBeenCalledTimes(2);
+ expect(front).not.toHaveBeenCalled();
+ rerender(view('none', 'red', 2));
+ fireEvent.click(element, inside);
+ rerender(view('red'));
+ fireEvent.click(element, inside);
+ expect(front).toHaveBeenCalledTimes(2);
+ expect(behind).toHaveBeenCalledTimes(2);
+ });
+
+ it('stops bubbling and emits each hover transition once with the real leaf target', () => {
+ const onParentClick = vi.fn();
+ const onEnter = vi.fn();
+ const onOver = vi.fn();
+ const onLeave = vi.fn();
+ const shape = createRef();
+ const { container } = render();
+ const element = renderer(container);
+ fireEvent.click(element, inside);
+ expect(onParentClick).not.toHaveBeenCalled();
+ fireEvent.pointerMove(element, inside);
+ fireEvent.pointerMove(element, inside);
+ expect(onEnter).toHaveBeenCalledTimes(1);
+ expect(onOver).toHaveBeenCalledTimes(1);
+ expect(onEnter.mock.calls[0][0].target).toBe(shape.current);
+ fireEvent.pointerMove(element, outside);
+ expect(onLeave).toHaveBeenCalledTimes(1);
+ expect(onLeave.mock.calls[0][0].target).toBe(shape.current);
+ });
+
+ it('fires missed only for complete empty primary presses, excluding hits, orphan ups, clicks, and cancels', () => {
+ const onMissed = vi.fn();
+ const { container } = render();
+ const element = renderer(container);
+ fireEvent.pointerUp(element, outside);
+ fireEvent.pointerDown(element, outside);
+ fireEvent.pointerUp(window, outside); // A release outside ends the press.
+ fireEvent.pointerUp(element, outside);
+ fireEvent.click(element, outside);
+ fireEvent.pointerDown(element, inside);
+ fireEvent.pointerUp(element, outside);
+ fireEvent.pointerDown(element, outside);
+ fireEvent.pointerUp(element, inside);
+ fireEvent.pointerDown(element, outside);
+ fireEvent.pointerCancel(element, outside);
+ fireEvent.pointerUp(element, outside);
+ fireEvent.pointerDown(element, { ...outside, button: 2 });
+ fireEvent.pointerUp(element, { ...outside, button: 2 });
+ expect(onMissed).not.toHaveBeenCalled();
+ fireEvent.pointerDown(element, outside);
+ fireEvent.pointerUp(element, outside);
+ fireEvent.click(element, outside);
+ expect(onMissed).toHaveBeenCalledTimes(1);
+ expect(onMissed.mock.calls[0][0].type).toBe('pointerup');
+ });
+
+ it('captures moves, ups, and cancels per pointer with bubbling and consistent payloads', () => {
+ const moves = vi.fn();
+ const ups = vi.fn();
+ const cancels = vi.fn();
+ const parentMoves = vi.fn();
+ const missed = vi.fn();
+ const captured: TwoEvent[] = [];
+ const onDown = (event: TwoEvent) => {
+ const id = (event.nativeEvent as PointerEvent).pointerId;
+ event.setPointerCapture(id);
+ expect(event.hasPointerCapture(id)).toBe(true);
+ captured.push(event);
+ };
+ const { container } = render();
+ const element = renderer(container);
+ fireEvent.pointerDown(element, inside);
+ fireEvent.pointerDown(element, { ...inside, pointerId: 2 });
+ fireEvent.pointerMove(element, { ...outside, pointerId: 3 });
+ expect(moves).not.toHaveBeenCalled();
+ fireEvent.pointerMove(element, outside);
+ expect(moves).toHaveBeenCalledTimes(1);
+ expect(parentMoves).toHaveBeenCalledTimes(1);
+ expect(moves.mock.calls[0][0].point).toEqual({ x: 760, y: 540 });
+ fireEvent.pointerUp(element, outside);
+ expect(ups).toHaveBeenCalledTimes(1);
+ expect(captured[0].hasPointerCapture(1)).toBe(false);
+ expect(captured[1].hasPointerCapture(2)).toBe(true);
+ fireEvent.pointerCancel(element, { ...outside, pointerId: 2 });
+ expect(cancels).toHaveBeenCalledTimes(1);
+ expect(captured[1].hasPointerCapture(2)).toBe(false);
+ fireEvent.pointerMove(element, outside);
+ expect(moves).toHaveBeenCalledTimes(1);
+ expect(missed).not.toHaveBeenCalled();
+ });
+
+ it('retains capture through callback rerenders and releases it when the last handler is removed', () => {
+ const first = vi.fn();
+ const latest = vi.fn();
+ const down = (event: TwoEvent) => event.setPointerCapture(1);
+ const view = (move: typeof first, enabled = true) => ;
+ const { container, rerender } = render(view(first));
+ const element = renderer(container);
+ const setCapture = vi.fn();
+ const releaseCapture = vi.fn();
+ Object.defineProperties(element, {
+ setPointerCapture: { value: setCapture },
+ hasPointerCapture: { value: () => true },
+ releasePointerCapture: { value: releaseCapture },
+ });
+ fireEvent.pointerDown(element, inside);
+ rerender(view(latest));
+ fireEvent.pointerMove(element, outside);
+ expect(first).not.toHaveBeenCalled();
+ expect(latest).toHaveBeenCalledTimes(1);
+ expect(releaseCapture).not.toHaveBeenCalled();
+ rerender(view(latest, false));
+ expect(releaseCapture).toHaveBeenCalledWith(1);
+ fireEvent.pointerMove(element, outside);
+ expect(latest).toHaveBeenCalledTimes(1);
+ });
+
+ it('supports explicit capture release and lost capture without routing later moves', () => {
+ const moves = vi.fn();
+ let down!: TwoEvent;
+ const { container } = render();
+ const element = renderer(container);
+ fireEvent.pointerDown(element, inside);
+ down.releasePointerCapture(1);
+ fireEvent.pointerMove(element, outside);
+ expect(moves).not.toHaveBeenCalled();
+ fireEvent.pointerDown(element, inside);
+ fireEvent(element, new PointerEvent('lostpointercapture', outside));
+ expect(down.hasPointerCapture(1)).toBe(false);
+ fireEvent.pointerMove(element, outside);
+ expect(moves).not.toHaveBeenCalled();
+ });
+});
+
+describe('SVG viewport coordinates', () => {
+ it('uses the SVG screen transform rather than assuming CSS viewport size scales artwork', () => {
+ const onClick = vi.fn();
+ const { container } = render();
+ const element = renderer(container);
+ expect(element.getAttribute('viewBox')).toBe('0 0 800 600');
+ // An unscaled viewport, or aspect-ratio letterboxing, has a different CTM
+ // from the dimensions ratio. jsdom needs that native matrix supplied.
+ Object.defineProperty(element, 'getScreenCTM', { value: () => ({
+ inverse: () => ({ a: 1, b: 0, c: 0, d: 1, e: -10, f: -20 }),
+ }) });
+ fireEvent.click(element, { clientX: 210, clientY: 170 });
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(onClick.mock.calls[0][0].point).toEqual({ x: 200, y: 150 });
+ });
+});
diff --git a/tests/events.test.tsx b/tests/events.test.tsx
index 500b6f8..20b8976 100644
--- a/tests/events.test.tsx
+++ b/tests/events.test.tsx
@@ -37,33 +37,12 @@ beforeEach(() => {
describe('react-two.js Event System', () => {
describe('hitTest Utility', () => {
- it('should correctly hit-test shape/group using getBoundingClientRect and stage offsets', () => {
- const mockTwo = {
- width: 800,
- height: 600,
- } as Two;
-
- // Create a mock group shape returning bounds [-50, -25, 50, 25] relative to center
- const mockGroup = {
- getBoundingClientRect: vi.fn().mockReturnValue({
- left: -50,
- right: 50,
- top: -25,
- bottom: 25,
- width: 100,
- height: 50,
- }),
- };
-
- // Stage center offset: (400, 300)
- // Top-Left DOM bounds: X in [350, 450], Y in [275, 325]
-
- // Point inside bounds
- expect(hitTest(mockGroup as unknown as Two.Group, 400, 300, mockTwo)).toBe(true);
-
- // Point outside bounds
- expect(hitTest(mockGroup as unknown as Two.Group, 200, 300, mockTwo)).toBe(false);
- expect(hitTest(mockGroup as unknown as Two.Group, 400, 500, mockTwo)).toBe(false);
+ it('uses world bounds without an artificial stage-center offset', () => {
+ const shape = {
+ getBoundingClientRect: () => ({ left: -50, right: 50, top: -25, bottom: 25 }),
+ } as unknown as Two.Group;
+ expect(hitTest(shape, 0, 0)).toBe(true);
+ expect(hitTest(shape, 400, 300)).toBe(false);
});
it('should fallback to checking children if shape has no getBoundingClientRect or contains', () => {
@@ -88,21 +67,14 @@ describe('react-two.js Event System', () => {
expect(hitTest(mockShape as unknown as Two.Shape, 10, 10)).toBe(false);
});
- it('should sort hits front-to-back (frontmost shape first)', () => {
- const mockBackgroundShape = { id: 'bg' };
- const mockForegroundShape = { id: 'fg' };
-
- const shapesMap = new Map();
- shapesMap.set(mockBackgroundShape, { shape: mockBackgroundShape, handlers: {} });
- shapesMap.set(mockForegroundShape, { shape: mockForegroundShape, handlers: {} });
-
- const hits = [mockBackgroundShape, mockForegroundShape];
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const sorted = sortFrontToBack(hits as any, shapesMap);
-
- // Foreground shape registered later must be FIRST in the hits array
- expect(sorted[0]).toBe(mockForegroundShape);
- expect(sorted[1]).toBe(mockBackgroundShape);
+ it('keeps unrelated hits stable instead of inventing registration draw order', () => {
+ const back = new Two.Circle(0, 0, 10);
+ const front = new Two.Circle(0, 0, 10);
+ const registry = new Map([
+ [back, { shape: back, handlers: {} }],
+ [front, { shape: front, handlers: {} }],
+ ]);
+ expect(sortFrontToBack([back, front], registry)).toEqual([back, front]);
});
it('should sort hits based on parent.children index when sharing same parent group', () => {
@@ -142,7 +114,7 @@ describe('react-two.js Event System', () => {
onPointerOut={onPointerOut}
onPointerLeave={onPointerLeave}
>
-
+
);
@@ -176,7 +148,9 @@ describe('react-two.js Event System', () => {
});
// Verify pointer events dispatched
- expect(canvasElement).toBeDefined();
+ expect(onPointerOver).toHaveBeenCalledTimes(1);
+ expect(onPointerOut).toHaveBeenCalledTimes(1);
+ expect(onPointerLeave).toHaveBeenCalledTimes(1);
});
it('should trigger over on top shape and out on bottom shape when moving onto overlapping top shape', () => {
diff --git a/tests/svgLifecycle.test.tsx b/tests/svgLifecycle.test.tsx
new file mode 100644
index 0000000..680344a
--- /dev/null
+++ b/tests/svgLifecycle.test.tsx
@@ -0,0 +1,258 @@
+import { createRef, StrictMode } from 'react';
+import { act, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Two from 'two.js';
+import { Canvas, Circle, SVG, useTwo } from '../lib/main';
+
+const artwork = '';
+let instance: Two | null;
+function Probe() { instance = useTwo().two; return null; }
+afterEach(() => { vi.restoreAllMocks(); vi.unstubAllGlobals(); });
+
+function deferred() {
+ let resolve!: (value: T) => void;
+ let reject!: (error: Error) => void;
+ const promise = new Promise((yes, no) => { resolve = yes; reject = no; });
+ return { promise, resolve, reject };
+}
+const response = (markup = artwork) => ({ ok: true, text: async () => markup }) as Response;
+
+// Tests retain real Two.js interpretation and control only the network boundary.
+describe('SVG loading lifecycle', () => {
+ it('supports shallow imports, cascading styles, transforms, and source replacement without removing JSX children', () => {
+ const svg = createRef();
+ const child = createRef();
+ const onLoad = vi.fn();
+ const view = (shallow: boolean, content = artwork) => (
+
+ );
+ const { rerender } = render(view(false));
+ const wrapper = svg.current!;
+ const jsx = child.current;
+ expect(wrapper.children).toHaveLength(2);
+ expect(wrapper.children[0]).toBeInstanceOf(Two.Group);
+ expect((wrapper.children[0] as Two.Group).children[0].id).toBe('nested');
+ expect(wrapper.translation.x).toBe(30);
+ expect(wrapper.scale).toBe(2);
+ expect(wrapper.fill).toBe('blue');
+ expect(onLoad).toHaveBeenCalledTimes(1);
+ expect(onLoad.mock.calls[0][0]).toBe(wrapper);
+ const imported = wrapper.children[0];
+ const unbind = vi.spyOn(imported, 'unbind');
+ rerender(view(true));
+ expect(wrapper.children[0].id).toBe('nested');
+ expect(wrapper.children[1]).toBe(jsx);
+ expect(unbind).toHaveBeenCalled();
+ expect(onLoad).toHaveBeenCalledTimes(2);
+ rerender(view(true, ''));
+ expect(wrapper.children[0]).toBeInstanceOf(Two.Rectangle);
+ expect(wrapper.children[1]).toBe(jsx);
+ expect(wrapper.children).toHaveLength(2);
+ });
+
+ it('aborts replacement requests and ignores a stale response even when the network ignores cancellation', async () => {
+ const first = deferred();
+ const second = deferred();
+ const fetchMock = vi.fn().mockReturnValueOnce(first.promise).mockReturnValueOnce(second.promise);
+ vi.stubGlobal('fetch', fetchMock);
+ const svg = createRef();
+ const onLoad = vi.fn();
+ const onError = vi.fn();
+ const view = (src: string) => ;
+ const { rerender, unmount } = render(view('/first.svg?revision=1'));
+ const firstSignal = fetchMock.mock.calls[0][1].signal;
+ rerender(view('/second.svg'));
+ expect(firstSignal.aborted).toBe(true);
+ await act(async () => { second.resolve(response()); });
+ const winner = svg.current!.children[0];
+ await act(async () => { first.resolve(response('')); });
+ expect(svg.current!.children).toEqual([winner]);
+ expect(onLoad).toHaveBeenCalledTimes(1);
+ expect(onError).not.toHaveBeenCalled();
+ const unbind = vi.spyOn(winner, 'unbind');
+ unmount();
+ expect(unbind).toHaveBeenCalled();
+ expect(fetchMock.mock.calls[1][1].signal.aborted).toBe(true);
+ });
+
+ it('ignores pending URL results and errors after unmount', async () => {
+ const pending = deferred();
+ vi.stubGlobal('fetch', vi.fn(() => pending.promise));
+ const onLoad = vi.fn();
+ const onError = vi.fn();
+ const { unmount } = render();
+ unmount();
+ await act(async () => { pending.reject(new Error('aborted')); });
+ expect(onLoad).not.toHaveBeenCalled();
+ expect(onError).not.toHaveBeenCalled();
+ });
+
+ it.each(['', 'not svg
', ''])('reports invalid inline content exactly once: %s', (content) => {
+ const onLoad = vi.fn();
+ const onError = vi.fn();
+ render();
+ expect(onLoad).not.toHaveBeenCalled();
+ expect(onError).toHaveBeenCalledTimes(1);
+ expect(onError.mock.calls[0][0]).toBeInstanceOf(Error);
+ });
+
+ it.each(['http', 'network', 'markup'])('reports %s URL failures exactly once', async (kind) => {
+ vi.stubGlobal('fetch', vi.fn(async () => {
+ if (kind === 'network') throw new Error('network unavailable');
+ return kind === 'http' ? { ok: false, status: 404 } : response('');
+ }));
+ const onLoad = vi.fn();
+ const onError = vi.fn();
+ await act(async () => { render(); });
+ expect(onLoad).not.toHaveBeenCalled();
+ expect(onError).toHaveBeenCalledTimes(1);
+ });
+
+ it('uses latest callbacks without reloading and preserves JSX sibling ordering', () => {
+ const svg = createRef();
+ const before = createRef();
+ const after = createRef();
+ const load = vi.spyOn(Two.prototype, 'load');
+ const view = (onLoad: () => void) => ;
+ const { rerender } = render(view(vi.fn()));
+ rerender(view(vi.fn()));
+ expect(load).toHaveBeenCalledTimes(1);
+ expect(instance!.scene.children).toEqual([before.current, svg.current, after.current]);
+ });
+
+ it('retains one import after StrictMode effect replay', () => {
+ const ref = createRef();
+ render();
+ expect(ref.current!.children).toHaveLength(1);
+ });
+});
+
+describe('SVG ownership and callbacks', () => {
+ it.each([false, true])('releases imported SVG DOM nodes on replacement and removal (shallow=%s)', (shallow) => {
+ const svg = createRef();
+ const child = createRef();
+ const gradient = new Two.LinearGradient(0, 0, 100, 0, [new Two.Stop(0, 'red'), new Two.Stop(1, 'blue')]);
+ const borrowedUnbind = vi.spyOn(gradient, 'unbind');
+ const view = (content: string, enabled = true) => ;
+ const { rerender } = render(view(artwork));
+ const wrapper = svg.current!;
+ const jsx = child.current!;
+ const rendererStates = () => {
+ const states: Array<{ elem?: Element }> = [];
+ const visit = (shape: Two.Shape) => {
+ states.push((shape as unknown as { _renderer: { elem?: Element } })._renderer);
+ if (shape instanceof Two.Group) shape.children.forEach(visit);
+ };
+ visit(wrapper.children[0]);
+ return states;
+ };
+ const previous = rendererStates();
+ expect(previous.every((state) => state.elem?.isConnected)).toBe(true);
+ rerender(view(''));
+ expect(previous.every((state) => state.elem === undefined)).toBe(true);
+ expect(wrapper.children[1]).toBe(jsx);
+ expect(borrowedUnbind).not.toHaveBeenCalledWith();
+ const current = rendererStates();
+ rerender(view(artwork, false));
+ expect(current.every((state) => state.elem === undefined)).toBe(true);
+ expect(borrowedUnbind).not.toHaveBeenCalledWith();
+ });
+
+ it('releases WebGL textures and buffers without unbinding borrowed effects', () => {
+ const svg = createRef();
+ const borrowed = new Two.LinearGradient(0, 0, 100, 0, [new Two.Stop(0, 'red')]);
+ const borrowedUnbind = vi.spyOn(borrowed, 'unbind');
+ const view = (content: string, enabled = true) => ;
+ const { rerender } = render(view(artwork));
+ const gl = { deleteTexture: vi.fn(), deleteBuffer: vi.fn() };
+ // Exercise Two.js's real release path with deterministic GPU handles.
+ const two = instance!;
+ const originalType = two.type;
+ Object.assign(two, { type: Two.Types.webgl });
+ Object.assign(two.renderer, { ctx: gl });
+ const track = () => {
+ const group = svg.current!.children[0] as Two.Group;
+ const nested = group.children[0] as Two.Group;
+ const shape = nested.children[0];
+ const state = (shape as unknown as { _renderer: Record })._renderer;
+ const handles = { texture: {}, positionBuffer: {}, effect: {} };
+ Object.assign(state, handles);
+ return { state, handles };
+ };
+ const first = track();
+ rerender(view(artwork.replace('red', 'blue')));
+ expect(gl.deleteTexture).toHaveBeenCalledWith(first.handles.texture);
+ expect(gl.deleteBuffer).toHaveBeenCalledWith(first.handles.positionBuffer);
+ expect(first.state.texture).toBeUndefined();
+ expect(first.state.positionBuffer).toBeUndefined();
+ expect(first.state.effect).toBeNull();
+ const second = track();
+ rerender(view(artwork, false));
+ expect(gl.deleteTexture).toHaveBeenCalledWith(second.handles.texture);
+ expect(gl.deleteBuffer).toHaveBeenCalledWith(second.handles.positionBuffer);
+ expect(gl.deleteTexture).toHaveBeenCalledTimes(2);
+ expect(gl.deleteBuffer).toHaveBeenCalledTimes(2);
+ expect(borrowedUnbind).not.toHaveBeenCalled();
+ Object.assign(two, { type: originalType });
+ delete (two.renderer as unknown as { ctx?: unknown }).ctx;
+ });
+
+ it('does not release borrowed declarative gradients when imported content is replaced', () => {
+ const gradient = new Two.LinearGradient(0, 0, 100, 0, [new Two.Stop(0, 'red'), new Two.Stop(1, 'blue')]);
+ const unbind = vi.spyOn(gradient, 'unbind');
+ const view = (content: string) => ;
+ const { rerender } = render(view(artwork));
+ rerender(view(''));
+ expect(unbind).not.toHaveBeenCalled();
+ });
+
+ it('uses the latest callback for pending URL loads without restarting the request', async () => {
+ const pending = deferred();
+ const fetchMock = vi.fn(() => pending.promise);
+ vi.stubGlobal('fetch', fetchMock);
+ const first = vi.fn();
+ const last = vi.fn();
+ const { rerender } = render();
+ rerender();
+ await act(async () => pending.resolve(response()));
+ expect(fetchMock).toHaveBeenCalledTimes(1);
+ expect(first).not.toHaveBeenCalled();
+ expect(last).toHaveBeenCalledTimes(1);
+ });
+
+ it('does not classify user onLoad exceptions as loading errors', () => {
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ const onError = vi.fn();
+ render();
+ expect(onError).not.toHaveBeenCalled();
+ });
+});
+
+it('keeps imports before JSX children when the JSX children are reordered', () => {
+ const svg = createRef();
+ const first = createRef();
+ const last = createRef();
+ const view = (reverse: boolean) => ;
+ const { rerender } = render(view(false));
+ const imported = svg.current!.children[0];
+ expect(svg.current!.children).toEqual([imported, first.current, last.current]);
+ rerender(view(true));
+ expect(svg.current!.children).toEqual([imported, last.current, first.current]);
+});