@rive-app/react-canvas 4.2.1 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/types/components/Rive.d.ts +13 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
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)}"function"==typeof SuppressedError&&SuppressedError;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
|
|
1
|
+
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)}"function"==typeof SuppressedError&&SuppressedError;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 l(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,l,d=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,l=0,function(){for(var e=this,n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];clearTimeout(l),l=window.setTimeout(function(){return o.apply(e,n)},s)})));return e.useEffect(function(){var e=d.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,d]),i}var d={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function v(e){return Object.assign({},d,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,d=v(u),h=e.useState({height:0,width:0}),p=h[0],w=p.height,R=p.width,y=h[1],g=e.useState({height:0,width:0}),b=g[0],m=b.height,C=b.width,O=g[1],E=e.useState(!0),x=E[0],P=E[1],T=d.fitCanvasToArtboardHeight,L=d.shouldResizeCanvasToContainer,z=d.useDevicePixelRatio,S=l(a,L),j=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}(),H=null!=f?f:{},M=H.maxX,k=H.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,M,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(d.fitCanvasToArtboardHeight&&s&&(a.current.style.height=t+"px",o=!0),d.useDevicePixelRatio){if(s||(n*j!==C||t*j!==m)){var u=j*n,f=j*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);y({width:n,height:t})}c&&(x||o)&&c&&c(),x&&P(!1)}},[i,a,S,j,D,x,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"]),l=i({width:"100%",height:"100%"},u);return r.default.createElement("div",i({ref:n,className:s},!s&&{style:l}),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],l=Boolean(t),d=v(a),w=e.useCallback(function(){c&&(c.startRendering(),c.resizeToCanvas())},[c]);h({riveLoaded:!!c,canvasRef:o,containerRef:s,options:d,onCanvasHasResized:w,artboardBounds:null==c?void 0:c.bounds});var R=e.useCallback(function(e){if(e&&t&&l){var r=d.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},[l]),y=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 g=null==t?void 0:t.animations;e.useEffect(function(){c&&g&&(c.isPlaying?(c.stop(c.animationNames),c.play(g)):c.isPaused&&(c.stop(c.animationNames),c.pause(g)))},[g,c]);var b=e.useCallback(function(e){return r.default.createElement(p,i({setContainerRef:y,setCanvasRef:R},e))},[R,y]);return{canvas:o.current,container:s.current,setCanvasRef:R,setContainerRef:y,rive:c,RiveComponent:b}}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,l=e.shouldDisableRiveListeners,d=void 0!==l&&l,v=e.shouldResizeCanvasToContainer,h=void 0===v||v,p=e.automaticallyHandleEvents,R=void 0!==p&&p,y=e.children,g=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),b=w({src:n,artboard:t,animations:o,layout:u,stateMachines:s,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:R},{useOffscreenRenderer:f,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(b,i({},g),y)},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]}})});
|
|
@@ -34,6 +34,18 @@ export interface RiveProps {
|
|
|
34
34
|
* Specify whether to resize the canvas to its container automatically
|
|
35
35
|
*/
|
|
36
36
|
shouldResizeCanvasToContainer?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
|
|
39
|
+
* functionality that can be invoked implicitly when detected.
|
|
40
|
+
*
|
|
41
|
+
* For example, if during the render loop an OpenUrlEvent is detected, the
|
|
42
|
+
* browser may try to open the specified URL in the payload.
|
|
43
|
+
*
|
|
44
|
+
* This flag is false by default to prevent any unwanted behaviors from taking place.
|
|
45
|
+
* This means any special Rive Event will have to be handled manually by subscribing to
|
|
46
|
+
* EventType.RiveEvent
|
|
47
|
+
*/
|
|
48
|
+
automaticallyHandleEvents?: boolean;
|
|
37
49
|
}
|
|
38
|
-
declare const Rive: ({ src, artboard, animations, stateMachines, layout, useOffscreenRenderer, shouldDisableRiveListeners, shouldResizeCanvasToContainer, children, ...rest }: RiveProps & ComponentProps<'canvas'>) => React.JSX.Element;
|
|
50
|
+
declare const Rive: ({ src, artboard, animations, stateMachines, layout, useOffscreenRenderer, shouldDisableRiveListeners, shouldResizeCanvasToContainer, automaticallyHandleEvents, children, ...rest }: RiveProps & ComponentProps<'canvas'>) => React.JSX.Element;
|
|
39
51
|
export default Rive;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rive-app/react-canvas",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"description": "React wrapper around the @rive-app/canvas library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/types/index.d.ts",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
"homepage": "https://github.com/rive-app/rive-react#readme",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@rive-app/canvas": "2.
|
|
21
|
+
"@rive-app/canvas": "2.4.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|