adding resize example

update name
ensure we re evaluate state machine inputs when we play is triggered, looks like there maybe additional situations where we are going to need this.
2026-03-13 08:22:30 +08:00 · 2022-07-21 17:00:42 +02:00 · 2022-07-21 17:00:21 +02:00 · 2022-07-21 10:17:27 +01:00 · 2022-07-21 10:08:52 +01:00
9 changed files with 190 additions and 25 deletions
--- a/examples/resize-test/README.md
+++ b/examples/resize-test/README.md
@@ -0,0 +1,32 @@
+# To run
+
+This is a basic showcase of a resize issue we have, to test this locally with rive-react changes
+
+1. run `npm start`
+2. run `npm run build` for the rive-react project
+
+If you want to also test local wasm changes: 
+
+1. update `rive-react`/package.json to a locally checked out version of rive-wasm's canvas_single
+`"@rive-app/canvas": "../rive-wasm/js/npm/canvas_single",`
+2. cd to `rive-wasm/js` & run `npm run dev` (keep this going as it will watch for changes)
+3. run `npm start`
+4. run `npm run build` for the rive-react project
+
+
+# Resize issue: 
+
+update parameters in `utils.ts` to see this for yourself.
+
+Resizing from window.resize
+    - bottom animation moves slower than rest
+    - cannot deal with the animations container resizing, unless its linked to the window resizing
+Resizing from ResizeObserver
+    - all animations move together super smooth when resizing
+    - top two animations flicker to white (blank canvas) when resizing
+Resizing form ResizeObserver - throttled (current default)
+    - all animations move "together"
+    - resizing looks pretty smooth, but everything lags behind a bit.
+
+# Other issues
+its also very slow resizing when dev tools is open, its fine when closed though.
--- a/examples/resize-test/package.json
+++ b/examples/resize-test/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "basic-with-hook",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "file:../../node_modules/react",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "rive-react": "file:../..",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/examples/resize-test/public/index.html
+++ b/examples/resize-test/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>Rive React - Basic with Hook</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/examples/resize-test/public/magic-ball.riv
+++ b/examples/resize-test/public/magic-ball.riv
--- a/examples/resize-test/public/poison-loader.riv
+++ b/examples/resize-test/public/poison-loader.riv
--- a/examples/resize-test/src/App.js
+++ b/examples/resize-test/src/App.js
@@ -0,0 +1,30 @@
+import { useRive } from 'rive-react';
+
+function App() {
+  const params = {
+    src: 'poison-loader.riv',
+    autoplay: true,
+  };
+
+  const { RiveComponent: RiveComponentBasic } = useRive(params);
+  const { RiveComponent: RiveComponentBasic2 } = useRive(params);
+  const { RiveComponent: RiveComponentBasic3 } = useRive(params);
+
+  return (
+    <>
+      <div style={{ width: '100%' }}>
+        <div style={{ height: '300px', width: '100%' }}>
+          <RiveComponentBasic />
+        </div>
+        <div style={{ height: '300px', width: '100%' }}>
+          <RiveComponentBasic2 />
+        </div>
+        <div style={{ height: '300px', width: '100%' }}>
+          <RiveComponentBasic3 />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default App;
--- a/examples/resize-test/src/index.js
+++ b/examples/resize-test/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
--- a/src/hooks/useStateMachineInput.ts
+++ b/src/hooks/useStateMachineInput.ts
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from '@rive-app/canvas';
+import { EventType, Rive, StateMachineInput } from '@rive-app/canvas';

 /**
 * Custom hook for fetching a stateMachine input from a rive file.
@@ -18,21 +18,33 @@ export default function useStateMachineInput(
  const [input, setInput] = useState<StateMachineInput | null>(null);

  useEffect(() => {
-    if (!rive || !stateMachineName || !inputName) {
-      setInput(null);
-    }
-
-    if (rive && stateMachineName && inputName) {
-      const inputs = rive.stateMachineInputs(stateMachineName);
-      if (inputs) {
-        const selectedInput = inputs.find((input) => input.name === inputName);
-        if (initialValue !== undefined && selectedInput) {
-          selectedInput.value = initialValue;
-        }
-        setInput(selectedInput || null);
+    function setStateMachineInput() {
+      if (!rive || !stateMachineName || !inputName) {
+        setInput(null);
      }
-    } else {
-      setInput(null);
+
+      if (rive && stateMachineName && inputName) {
+        const inputs = rive.stateMachineInputs(stateMachineName);
+        if (inputs) {
+          const selectedInput = inputs.find(
+            (input) => input.name === inputName
+          );
+          if (initialValue !== undefined && selectedInput) {
+            selectedInput.value = initialValue;
+          }
+          setInput(selectedInput || null);
+        }
+      } else {
+        setInput(null);
+      }
+    }
+    setStateMachineInput();
+    if (rive) {
+      rive.on(EventType.Play, () => {
+        // Check if the component/canvas is mounted before setting state to avoid setState
+        // on an unmounted component in some rare cases
+        setStateMachineInput();
+      });
    }
  }, [rive]);

--- a/src/utils.ts
+++ b/src/utils.ts
@@ -8,8 +8,20 @@ class FakeResizeObserver {
  disconnect() {}
 }

+function throttle(f: Function, delay: number) {
+  let timer = 0;
+  return function (this: Function, ...args: any) {
+    clearTimeout(timer);
+    timer = setTimeout(() => f.apply(this, args), delay) as unknown as number;
+  };
+}
+
 const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
 const hasResizeObserver = globalThis.ResizeObserver !== undefined;
+const preferResizeObserver = true;
+const throttleResizeObserver = true;
+const useResizeObserver = hasResizeObserver && preferResizeObserver;
+const useWindowListener = !useResizeObserver;

 export function useSize(
  containerRef: React.MutableRefObject<HTMLElement | null>
@@ -29,32 +41,48 @@ export function useSize(
        });
      };

-      if (!hasResizeObserver) {
+      if (useWindowListener) {
        // only pay attention to window size changes when we do not have the resizeObserver (IE only)
-        window.addEventListener('resize', handleResize);
        handleResize();
+        window.addEventListener('resize', handleResize);
      }
+
      return () => window.removeEventListener('resize', handleResize);
    }
  }, []);
-
  const observer = useRef(
-    new MyResizeObserver((entries) => {
-      setSize({
-        width: entries[entries.length - 1].contentRect.width,
-        height: entries[entries.length - 1].contentRect.height,
-      });
-    })
+    new MyResizeObserver(
+      throttleResizeObserver
+        ? throttle((entries: any) => {
+            if (useResizeObserver) {
+              setSize({
+                width: entries[entries.length - 1].contentRect.width,
+                height: entries[entries.length - 1].contentRect.height,
+              });
+            }
+          }, 16)
+        : (entries: any) => {
+            if (useResizeObserver) {
+              setSize({
+                width: entries[entries.length - 1].contentRect.width,
+                height: entries[entries.length - 1].contentRect.height,
+              });
+            }
+          }
+    )
  );

  useEffect(() => {
    const current = observer.current;
-    if (containerRef.current) {
+    if (containerRef.current && useResizeObserver) {
      current.observe(containerRef.current);
    }

    return () => {
      current.disconnect();
+      if (containerRef.current && useResizeObserver) {
+        current.unobserve(containerRef.current);
+      }
    };
  }, [containerRef, observer]);
Author	SHA1	Message	Date
Maxwell Talbot	25afe7d77e	adding resize example	2022-07-21 17:00:42 +02:00
Maxwell Talbot	258270b4fc	update name	2022-07-21 17:00:21 +02:00
Maxwell Talbot	41962ef864	ensure we re evaluate state machine inputs when we play is triggered, looks like there maybe additional situations where we are going to need this.	2022-07-21 10:17:27 +01:00
Maxwell Talbot	c69fffa5cf	update resize behaviour to throttle, add parameters to enable switching modes	2022-07-21 10:08:52 +01:00