@rive-app/react-canvas 3.0.50 → 3.0.51

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@rive-app/canvas");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}var o=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var u=globalThis.ResizeObserver||o,s=void 0!==globalThis.ResizeObserver,c=!s;function f(t){var n=e.useState({width:0,height:0}),r=n[0],i=n[1];e.useEffect(function(){if("undefined"!=typeof window){var e=function(){i({width:window.innerWidth,height:window.innerHeight})};return c&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var a,o,f,l=e.useRef(new u((a=function(e){s&&i({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},o=0,f=0,function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];clearTimeout(f),f=window.setTimeout(function(){return a.apply(e,t)},o)})));return e.useEffect(function(){var e=l.current;return t.current&&s&&e.observe(t.current),function(){e.disconnect(),t.current&&s&&e.unobserve(t.current)}},[t,l]),r}function l(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}function d(e){var t=e.setContainerRef,n=e.setCanvasRef,o=e.className,u=void 0===o?"":o,s=e.style,c=e.children,f=a(e,["setContainerRef","setCanvasRef","className","style","children"]),l=i({width:"100%",height:"100%"},s);return r.default.createElement("div",i({ref:t,className:u},!u&&{style:l}),r.default.createElement("canvas",i({ref:n,style:{verticalAlign:"top",width:0,height:0}},f),c))}var h={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function v(n,a){void 0===a&&(a={});var o=e.useRef(null),u=e.useRef(null),s=e.useState(null),c=s[0],v=s[1],p=e.useState({height:0,width:0}),w=p[0],g=p[1],y=e.useState({height:0,width:0}),b=y[0],m=y[1],R=f(u),O=function(){var t=l(),n=e.useState(t),r=n[0],i=n[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=l();i(e)},t=window.matchMedia("screen and (resolution: ".concat(r,"dppx)"));return t.hasOwnProperty("addEventListener")?t.addEventListener("change",e):t.addListener(e),function(){t.hasOwnProperty("removeEventListener")?t.removeEventListener("change",e):t.removeListener(e)}}},[r]),r}(),E=Boolean(n),x=function(e){return Object.assign({},h,e)}(a);function C(){if(u.current){var e=function(){var e,t,n,r,i=null!==(t=null===(e=u.current)||void 0===e?void 0:e.clientWidth)&&void 0!==t?t:0,a=null!==(r=null===(n=u.current)||void 0===n?void 0:n.clientHeight)&&void 0!==r?r:0;if(c&&x.fitCanvasToArtboardHeight){var o=c.bounds;return{width:i,height:i*(o.maxY/o.maxX)}}return{width:i,height:a}}(),t=e.width,n=e.height;if(o.current&&c){var r=t!==w.width||n!==w.height;if(x.fitCanvasToArtboardHeight&&r&&(u.current.style.height=n+"px"),x.useDevicePixelRatio){var i=t*O!==b.width||n*O!==b.height;if(r||i){var a=O*t,s=O*n;o.current.width=a,o.current.height=s,o.current.style.width=t+"px",o.current.style.height=n+"px",m({width:a,height:s})}}else r&&(o.current.width=t,o.current.height=n,m({width:t,height:n}));g({width:t,height:n}),c.startRendering()}c&&c.resizeToCanvas()}}e.useEffect(function(){c&&C()},[c,R,O]);var P=e.useCallback(function(e){if(e&&n&&E){var r=x.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){o.current?v(a):a.cleanup()})}else null===e&&o.current&&(o.current.height=0,o.current.width=0);o.current=e},[E]),L=e.useCallback(function(e){u.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?c&&c.startRendering():c&&c.stopRendering()});return o.current&&e.observe(o.current),function(){e.disconnect()}},[c]),e.useEffect(function(){return function(){c&&(c.cleanup(),v(null))}},[c]);var j=null==n?void 0:n.animations;e.useEffect(function(){c&&j&&(c.isPlaying?(c.stop(c.animationNames),c.play(j)):c.isPaused&&(c.stop(c.animationNames),c.pause(j)))},[j,c]);var M=e.useCallback(function(e){return r.default.createElement(d,i({setContainerRef:L,setCanvasRef:P},e))},[]);return{canvas:o.current,setCanvasRef:P,setContainerRef:L,rive:c,RiveComponent:M}}exports.default=function(e){var t=e.src,n=e.artboard,o=e.animations,u=e.stateMachines,s=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,l=e.shouldDisableRiveListeners,d=void 0!==l&&l,h=e.children,p=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","children"]),w=v({src:t,artboard:n,animations:o,layout:s,stateMachines:u,autoplay:!0,shouldDisableRiveListeners:d},{useOffscreenRenderer:f}).RiveComponent;return r.default.createElement(w,i({},p),h)},exports.useRive=v,exports.useStateMachineInput=function(n,r,i,a){var o=e.useState(null),u=o[0],s=o[1];return e.useEffect(function(){function e(){if(n&&r&&i||s(null),n&&r&&i){var e=n.stateMachineInputs(r);if(e){var t=e.find(function(e){return e.name===i});void 0!==a&&t&&(t.value=a),s(t||null)}}else s(null)}e(),n&&n.on(t.EventType.Play,function(){e()})},[n]),u},Object.keys(t).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@rive-app/canvas");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e),i=function(){return i=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},i.apply(this,arguments)};function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)n.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(t[r[i]]=e[r[i]])}return t}function o(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}var s=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var u=globalThis.ResizeObserver||s,c=void 0!==globalThis.ResizeObserver,f=!c;function d(n,t){void 0===t&&(t=!0);var r=e.useState({width:0,height:0}),i=r[0],a=r[1];e.useEffect(function(){if("undefined"!=typeof window&&t){var e=function(){a({width:window.innerWidth,height:window.innerHeight})};return f&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var o,s,d,l=e.useRef(new u((o=function(e){c&&a({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},s=0,d=0,function(){for(var e=this,n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];clearTimeout(d),d=window.setTimeout(function(){return o.apply(e,n)},s)})));return e.useEffect(function(){var e=l.current;if(t){var r=n.current;return n.current&&c&&e.observe(n.current),function(){e.disconnect(),r&&c&&e.unobserve(r)}}e.disconnect()},[n,l]),i}var l={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function v(e){return Object.assign({},l,e)}function h(n){var t=n.riveLoaded,r=void 0!==t&&t,i=n.canvasRef,a=n.containerRef,s=n.options,u=void 0===s?{}:s,c=n.onCanvasHasResized,f=n.artboardBounds,l=v(u),h=e.useState({height:0,width:0}),p=h[0],w=p.height,R=p.width,g=h[1],b=e.useState({height:0,width:0}),y=b[0],m=y.height,C=y.width,O=b[1],x=e.useState(!0),E=x[0],P=x[1],T=l.fitCanvasToArtboardHeight,L=l.shouldResizeCanvasToContainer,z=l.useDevicePixelRatio,j=d(a,L),M=function(){var n=o(),t=e.useState(n),r=t[0],i=t[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=o();i(e)},n=window.matchMedia("screen and (resolution: ".concat(r,"dppx)"));return n.hasOwnProperty("addEventListener")?n.addEventListener("change",e):n.addListener(e),function(){n.hasOwnProperty("removeEventListener")?n.removeEventListener("change",e):n.removeListener(e)}}},[r]),r}(),S=null!=f?f:{},H=S.maxX,k=S.maxY,D=e.useCallback(function(){var e,n,t,r,i=null!==(n=null===(e=a.current)||void 0===e?void 0:e.clientWidth)&&void 0!==n?n:0,o=null!==(r=null===(t=a.current)||void 0===t?void 0:t.clientHeight)&&void 0!==r?r:0;return T&&f?{width:i,height:i*(f.maxY/f.maxX)}:{width:i,height:o}},[a,T,H,k]);e.useEffect(function(){if(L&&a.current&&r){var e=D(),n=e.width,t=e.height,o=!1;if(i.current){var s=n!==R||t!==w;if(l.fitCanvasToArtboardHeight&&s&&(a.current.style.height=t+"px",o=!0),l.useDevicePixelRatio){if(s||(n*M!==C||t*M!==m)){var u=M*n,f=M*t;i.current.width=u,i.current.height=f,i.current.style.width=n+"px",i.current.style.height=t+"px",O({width:u,height:f}),o=!0}}else s&&(i.current.width=n,i.current.height=t,O({width:n,height:t}),o=!0);g({width:n,height:t})}c&&(E||o)&&c&&c(),E&&P(!1)}},[i,a,j,M,D,E,P,m,C,w,R,c,L,T,z,r])}function p(e){var n=e.setContainerRef,t=e.setCanvasRef,o=e.className,s=void 0===o?"":o,u=e.style,c=e.children,f=a(e,["setContainerRef","setCanvasRef","className","style","children"]),d=i({width:"100%",height:"100%"},u);return r.default.createElement("div",i({ref:n,className:s},!s&&{style:d}),r.default.createElement("canvas",i({ref:t,style:{verticalAlign:"top",width:0,height:0}},f),c))}function w(t,a){void 0===a&&(a={});var o=e.useRef(null),s=e.useRef(null),u=e.useState(null),c=u[0],f=u[1],d=Boolean(t),l=v(a),w=e.useCallback(function(){c&&(c.startRendering(),c.resizeToCanvas())},[c]);h({riveLoaded:!!c,canvasRef:o,containerRef:s,options:l,onCanvasHasResized:w,artboardBounds:null==c?void 0:c.bounds});var R=e.useCallback(function(e){if(e&&t&&d){var r=l.useOffscreenRenderer,a=new n.Rive(i(i({useOffscreenRenderer:r},t),{canvas:e}));a.on(n.EventType.Load,function(){o.current?f(a):a.cleanup()})}else null===e&&o.current&&(o.current.height=0,o.current.width=0);o.current=e},[d]),g=e.useCallback(function(e){s.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?c&&c.startRendering():c&&c.stopRendering()});return o.current&&e.observe(o.current),function(){e.disconnect()}},[c]),e.useEffect(function(){return function(){c&&(c.cleanup(),f(null))}},[c]);var b=null==t?void 0:t.animations;e.useEffect(function(){c&&b&&(c.isPlaying?(c.stop(c.animationNames),c.play(b)):c.isPaused&&(c.stop(c.animationNames),c.pause(b)))},[b,c]);var y=e.useCallback(function(e){return r.default.createElement(p,i({setContainerRef:g,setCanvasRef:R},e))},[R,g]);return{canvas:o.current,container:s.current,setCanvasRef:R,setContainerRef:g,rive:c,RiveComponent:y}}exports.default=function(e){var n=e.src,t=e.artboard,o=e.animations,s=e.stateMachines,u=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,d=e.shouldDisableRiveListeners,l=void 0!==d&&d,v=e.shouldResizeCanvasToContainer,h=void 0===v||v,p=e.children,R=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","children"]),g=w({src:n,artboard:t,animations:o,layout:u,stateMachines:s,autoplay:!0,shouldDisableRiveListeners:l},{useOffscreenRenderer:f,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(g,i({},R),p)},exports.useResizeCanvas=h,exports.useRive=w,exports.useStateMachineInput=function(t,r,i,a){var o=e.useState(null),s=o[0],u=o[1];return e.useEffect(function(){function e(){if(t&&r&&i||u(null),t&&r&&i){var e=t.stateMachineInputs(r);if(e){var n=e.find(function(e){return e.name===i});void 0!==a&&n&&(n.value=a),u(n||null)}}else u(null)}e(),t&&t.on(n.EventType.Play,function(){e()})},[t]),s},Object.keys(n).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return n[e]}})});

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "3.0.50",
+  "version": "3.0.51",
   "description": "React wrapper around the @rive-app/canvas library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",

package/dist/types/components/Rive.d.ts

@@ -30,6 +30,10 @@ export interface RiveProps {
      * Specify whether to disable Rive listeners on the canvas, thus preventing any event listeners to be attached to the canvas element
      */
     shouldDisableRiveListeners?: boolean;
+    /**
+     * Specify whether to resize the canvas to its container automatically
+     */
+    shouldResizeCanvasToContainer?: boolean;
 }
-declare const Rive: ({ src, artboard, animations, stateMachines, layout, useOffscreenRenderer, shouldDisableRiveListeners, children, ...rest }: RiveProps & ComponentProps<'canvas'>) => React.JSX.Element;
+declare const Rive: ({ src, artboard, animations, stateMachines, layout, useOffscreenRenderer, shouldDisableRiveListeners, shouldResizeCanvasToContainer, children, ...rest }: RiveProps & ComponentProps<'canvas'>) => React.JSX.Element;
 export default Rive;

package/dist/types/hooks/useContainerSize.d.ts

@@ -0,0 +1,10 @@
+import { Dimensions } from '../types';
+/**
+ * Hook to listen for a ref element's resize events being triggered. When resized,
+ * it sets state to an object of {width: number, height: number} indicating the contentRect
+ * size of the element at the new resize.
+ *
+ * @param containerRef - Ref element to listen for resize events on
+ * @returns - Size object with width and height attributes
+ */
+export default function useSize(containerRef: React.MutableRefObject<HTMLElement | null>, shouldResizeCanvasToContainer?: boolean): Dimensions;

package/dist/types/hooks/useDevicePixelRatio.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Listen for devicePixelRatio changes and set the new value accordingly. This could
+ * happen for reasons such as:
+ * - User moves window from retina screen display to a separate monitor
+ * - User controls zoom settings on the browser
+ *
+ * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
+ *
+ * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
+ */
+export default function useDevicePixelRatio(): number;

package/dist/types/hooks/useResizeCanvas.d.ts

@@ -0,0 +1,52 @@
+import { MutableRefObject } from 'react';
+import { Bounds } from '@rive-app/canvas';
+import { UseRiveOptions } from '../types';
+interface UseResizeCanvasProps {
+    /**
+     * Whether or not Rive is loaded and renderer is associated with the canvas
+     */
+    riveLoaded: boolean;
+    /**
+     * Ref to the canvas element
+     */
+    canvasRef: MutableRefObject<HTMLCanvasElement | null>;
+    /**
+     * Ref to the container element of the canvas
+     */
+    containerRef: MutableRefObject<HTMLElement | null>;
+    /**
+     * (Optional) Callback to be invoked after the canvas has been resized due to a resize
+     * of its parent container. This is where you would want to reset the layout
+     * dimensions for the Rive renderer to dictate the new min/max bounds of the
+     * canvas.
+     *
+     * Using the high-level JS runtime, this might be a simple call to `rive.resizeToCanvas()`
+     * Using the low-level JSruntime, this might be invoking the renderer's `.align()` method
+     * with the Layout and min/max X/Y values of the canvas.
+     *
+     * @returns void
+     */
+    onCanvasHasResized?: () => void;
+    /**
+     * (Optional) Options passed to the useRive hook, including the shouldResizeCanvasToContainer option
+     * which prevents the canvas element from resizing to its parent container
+     */
+    options?: Partial<UseRiveOptions>;
+    /**
+     * (Optional) AABB bounds of the artboard. If provided, the canvas will be sized to the artboard
+     * height if the fitCanvasToArtboardHeight option is true.
+     */
+    artboardBounds?: Bounds;
+}
+/**
+ * Helper hook to listen for changes in the <canvas> parent container size and size the <canvas>
+ * to match. If a resize event has occurred, a supplied callback (onCanvasHasResized)
+ * will be inokved to allow for any re-calculation needed (i.e. Rive layout on the canvas).
+ *
+ * This hook is useful if you are not intending to use the `useRive` hook yourself, but still
+ * want to use the auto-sizing logic on the canvas/container.
+ *
+ * @param props - Object to supply necessary props to the hook
+ */
+export default function useResizeCanvas({ riveLoaded, canvasRef, containerRef, options, onCanvasHasResized, artboardBounds, }: UseResizeCanvasProps): void;
+export {};

package/dist/types/index.d.ts

@@ -1,7 +1,8 @@
 import Rive from './components/Rive';
 import useRive from './hooks/useRive';
 import useStateMachineInput from './hooks/useStateMachineInput';
+import useResizeCanvas from './hooks/useResizeCanvas';
 export default Rive;
-export { useRive, useStateMachineInput };
+export { useRive, useStateMachineInput, useResizeCanvas };
 export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
 export * from '@rive-app/canvas';

package/dist/types/types.d.ts

@@ -5,6 +5,7 @@ export type UseRiveOptions = {
     useDevicePixelRatio: boolean;
     fitCanvasToArtboardHeight: boolean;
     useOffscreenRenderer: boolean;
+    shouldResizeCanvasToContainer: boolean;
 };
 export type Dimensions = {
     width: number;
@@ -13,6 +14,7 @@ export type Dimensions = {
 /**
  * @typedef RiveState
  * @property canvas - Canvas element the Rive Animation is attached to.
+ * @property container - Container element of the canvas.
  * @property setCanvasRef - Ref callback to be passed to the canvas element.
  * @property setContainerRef - Ref callback to be passed to the container element
  *   of the canvas. This is optional, however if not used then the hook will
@@ -22,6 +24,7 @@ export type Dimensions = {
  */
 export type RiveState = {
     canvas: HTMLCanvasElement | null;
+    container: HTMLElement | null;
     setCanvasRef: RefCallback<HTMLCanvasElement>;
     setContainerRef: RefCallback<HTMLElement>;
     rive: Rive | null;

package/dist/types/utils.d.ts

@@ -1,15 +1,7 @@
-import React from 'react';
-import { Dimensions } from './types';
-export declare function useSize(containerRef: React.MutableRefObject<HTMLElement | null>): Dimensions;
-/**
- * Listen for devicePixelRatio changes and set the new value accordingly. This could
- * happen for reasons such as:
- * - User moves window from retina screen display to a separate monitor
- * - User controls zoom settings on the browser
- *
- * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
- *
- * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
- */
-export declare function useDevicePixelRatio(): number;
-export declare function getDevicePixelRatio(): number;
+import { UseRiveOptions } from './types';
+export declare function getOptions(opts: Partial<UseRiveOptions>): {
+    useDevicePixelRatio: boolean;
+    fitCanvasToArtboardHeight: boolean;
+    useOffscreenRenderer: boolean;
+    shouldResizeCanvasToContainer: boolean;
+} & Partial<UseRiveOptions>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "3.0.50",
+  "version": "3.0.51",
   "description": "React wrapper around the @rive-app/canvas library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",