diff --git a/examples/public/artboard_db_test.riv b/examples/public/artboard_db_test.riv new file mode 100644 index 0000000..de27ccd Binary files /dev/null and b/examples/public/artboard_db_test.riv differ diff --git a/examples/src/components/DataBindingTests.stories.tsx b/examples/src/components/DataBindingTests.stories.tsx index 6971bdb..f327c04 100644 --- a/examples/src/components/DataBindingTests.stories.tsx +++ b/examples/src/components/DataBindingTests.stories.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { within, expect, waitFor, userEvent } from '@storybook/test'; -import { StringPropertyTest, NumberPropertyTest, BooleanPropertyTest, ColorPropertyTest, EnumPropertyTest, NestedViewModelTest, TriggerPropertyTest, PersonForm, PersonInstances, ImagePropertyTest, TodoListTest } from './DataBindingTests'; +import { StringPropertyTest, NumberPropertyTest, BooleanPropertyTest, ColorPropertyTest, EnumPropertyTest, NestedViewModelTest, TriggerPropertyTest, PersonForm, PersonInstances, ImagePropertyTest, TodoListTest, ArtboardPropertyTest } from './DataBindingTests'; const meta: Meta = { title: 'Tests/DataBinding', @@ -481,4 +481,47 @@ export const TodoListStory: StoryObj = { } } +}; + +export const ArtboardPropertyStory: StoryObj = { + name: 'Artboard Property', + render: () => , + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Wait for the Rive file to load + await waitFor(() => { + expect(canvas.getByTestId('set-artboard1-blue')).toBeTruthy(); + expect(canvas.getByTestId('set-artboard1-red')).toBeTruthy(); + expect(canvas.getByTestId('set-artboard1-green')).toBeTruthy(); + }, { timeout: 3000 }); + + // Initially should show None + expect(canvas.getByTestId('artboard1-current').textContent).toBe('Current: None'); + expect(canvas.getByTestId('artboard2-current').textContent).toBe('Current: None'); + + // Set artboard 1 to blue + await userEvent.click(canvas.getByTestId('set-artboard1-blue')); + await waitFor(() => { + expect(canvas.getByTestId('artboard1-current').textContent).toBe('Current: ArtboardBlue'); + }); + + // Set artboard 2 to red + await userEvent.click(canvas.getByTestId('set-artboard2-red')); + await waitFor(() => { + expect(canvas.getByTestId('artboard2-current').textContent).toBe('Current: ArtboardRed'); + }); + + // Switch artboard 1 to green + await userEvent.click(canvas.getByTestId('set-artboard1-green')); + await waitFor(() => { + expect(canvas.getByTestId('artboard1-current').textContent).toBe('Current: ArtboardGreen'); + }); + + // Switch artboard 2 to blue + await userEvent.click(canvas.getByTestId('set-artboard2-blue')); + await waitFor(() => { + expect(canvas.getByTestId('artboard2-current').textContent).toBe('Current: ArtboardBlue'); + }); + } }; \ No newline at end of file diff --git a/examples/src/components/DataBindingTests.tsx b/examples/src/components/DataBindingTests.tsx index a4e589c..87e68da 100644 --- a/examples/src/components/DataBindingTests.tsx +++ b/examples/src/components/DataBindingTests.tsx @@ -13,7 +13,8 @@ import Rive, { useViewModelInstanceImage, decodeImage, ViewModelInstance, - useViewModelInstanceList + useViewModelInstanceList, + useViewModelInstanceArtboard } from '@rive-app/react-webgl2'; @@ -786,4 +787,95 @@ export const TodoListTest = ({ src }: { src: string }) => { )} ); +}; + +export const ArtboardPropertyTest = ({ src }: { src: string }) => { + const [currentArtboard1, setCurrentArtboard1] = useState('None'); + const [currentArtboard2, setCurrentArtboard2] = useState('None'); + + const { rive, RiveComponent } = useRive({ + src, + autoplay: true, + artboard: "Main", + autoBind: true, + stateMachines: "State Machine 1", + }); + + const { setValue: setArtboard1 } = useViewModelInstanceArtboard('artboard_1', rive?.viewModelInstance); + const { setValue: setArtboard2 } = useViewModelInstanceArtboard('artboard_2', rive?.viewModelInstance); + + const handleSetArtboard1 = (artboardName: string) => { + if (rive) { + const artboard = rive.getArtboard(artboardName); + setArtboard1(artboard); + setCurrentArtboard1(artboardName); + } + }; + + const handleSetArtboard2 = (artboardName: string) => { + if (rive) { + const artboard = rive.getArtboard(artboardName); + setArtboard2(artboard); + setCurrentArtboard2(artboardName); + } + }; + + return ( +
+ + {(rive === null) ?
Loading…
: ( +
+
+

Artboard 1:

+
+ + + +
+
Current: {currentArtboard1}
+
+ +
+

Artboard 2:

+
+ + + +
+
Current: {currentArtboard2}
+
+
+ )} +
+ ); }; \ No newline at end of file