@rive-app/react-webgl2 4.21.3 → 4.21.4

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@rive-app/webgl2");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/n(e),u=function(){return u=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var u in t=arguments[n])Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u]);return e},u.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 u=0;for(r=Object.getOwnPropertySymbols(e);u<r.length;u++)t.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(e,r[u])&&(n[r[u]]=e[r[u]])}return n}function i(e,t,n,r){return new(n||(n=Promise))(function(u,a){function i(e){try{l(r.next(e))}catch(e){a(e)}}function o(e){try{l(r.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?u(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(i,o)}l((r=r.apply(e,t||[])).next())})}function o(e,t){var n,r,u,a,i={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return a={next:o(0),throw:o(1),return:o(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function o(a){return function(o){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,r&&(u=2&a[0]?r.return:a[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,a[1])).done)return u;switch(r=0,u&&(a=[2&a[0],u.value]),a[0]){case 0:case 1:u=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(u=i.trys,(u=u.length>0&&u[u.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!u||a[1]>u[0]&&a[1]<u[3])){i.label=a[1];break}if(6===a[0]&&i.label<u[1]){i.label=u[1],u=a;break}if(u&&i.label<u[2]){i.label=u[2],i.ops.push(a);break}u[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],r=0}finally{n=u=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,o])}}}function l(t){var n=t||s(),r=e.useState(n),u=r[0],a=r[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=t||s();a(e)},n=window.matchMedia("screen and (resolution: ".concat(u,"dppx)"));return n.hasOwnProperty("addEventListener")?n.addEventListener("change",e):n.addListener(e),function(){n.hasOwnProperty("removeEventListener")?n.removeEventListener("change",e):n.removeListener(e)}}},[u,t]),u}function s(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}var c=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var f=globalThis.ResizeObserver||c,d=void 0!==globalThis.ResizeObserver,v=!d;function h(t,n){void 0===n&&(n=!0);var r=e.useState({width:0,height:0}),u=r[0],a=r[1];e.useEffect(function(){if("undefined"!=typeof window&&n){var e=function(){a({width:window.innerWidth,height:window.innerHeight})};return v&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var i,o,l,s=e.useRef(new f((i=function(e){d&&a({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},o=0,l=0,function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];clearTimeout(l),l=window.setTimeout(function(){return i.apply(e,t)},o)})));return e.useEffect(function(){var e=s.current;if(n){var r=t.current;return t.current&&d&&e.observe(t.current),function(){e.disconnect(),r&&d&&e.unobserve(r)}}e.disconnect()},[t,s]),u}var p={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function b(e){return Object.assign({},p,e)}function g(t){var n=t.riveLoaded,r=void 0!==n&&n,u=t.canvasElem,a=t.containerRef,i=t.options,o=void 0===i?{}:i,s=t.onCanvasHasResized,c=t.artboardBounds,f=b(o),d=e.useState({height:0,width:0}),v=d[0],p=v.height,g=v.width,y=d[1],w=e.useState({height:0,width:0}),m=w[0],C=m.height,R=m.width,E=w[1],x=e.useState(!0),O=x[0],V=x[1],k=f.fitCanvasToArtboardHeight,P=f.shouldResizeCanvasToContainer,M=f.useDevicePixelRatio,T=f.customDevicePixelRatio,S=h(a,P),D=l(T),I=null!=c?c:{},L=I.maxX,z=I.maxY,H=e.useCallback(function(){var e,t,n,r,u=null!==(t=null===(e=a.current)||void 0===e?void 0:e.clientWidth)&&void 0!==t?t:0,i=null!==(r=null===(n=a.current)||void 0===n?void 0:n.clientHeight)&&void 0!==r?r:0;return k&&c?{width:u,height:u*(c.maxY/c.maxX)}:{width:u,height:i}},[a,k,L,z]);e.useEffect(function(){if(P&&a.current&&r){var e=H(),t=e.width,n=e.height,i=!1;if(u){var o=t!==g||n!==p;if(f.fitCanvasToArtboardHeight&&o&&(a.current.style.height=n+"px",i=!0),f.useDevicePixelRatio){if(o||(t*D!==R||n*D!==C)){var l=D*t,c=D*n;u.width=l,u.height=c,u.style.width=t+"px",u.style.height=n+"px",E({width:l,height:c}),i=!0}}else o&&(u.width=t,u.height=n,E({width:t,height:n}),i=!0);y({width:t,height:n})}s&&(O||i)&&s&&s(),O&&V(!1)}},[u,a,S,D,H,O,V,C,R,p,g,s,P,k,M,r]),e.useEffect(function(){E({width:0,height:0})},[u])}var y,w=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}(),m=globalThis.IntersectionObserver||w,C=function(){function e(){var e=this;this.elementsMap=new Map,this.onObserved=function(t){t.forEach(function(t){var n=e.elementsMap.get(t.target);n&&n(t)})},this.observer=new m(this.onObserved)}return e.prototype.registerCallback=function(e,t){this.observer.observe(e),this.elementsMap.set(e,t)},e.prototype.removeCallback=function(e){this.observer.unobserve(e),this.elementsMap.delete(e)},e}(),R=function(){return y||(y=new C),y};function E(e){var t=e.setContainerRef,n=e.setCanvasRef,i=e.className,o=void 0===i?"":i,l=e.style,s=e.children,c=a(e,["setContainerRef","setCanvasRef","className","style","children"]),f=u({width:"100%",height:"100%"},l);return r.default.createElement("div",u({ref:t,className:o},!o&&{style:f}),r.default.createElement("canvas",u({ref:n,style:{verticalAlign:"top",width:0,height:0}},c),s))}function x(n,a){void 0===a&&(a={});var i=e.useState(null),o=i[0],s=i[1],c=e.useRef(null),f=e.useState(null),d=f[0],v=f[1],h=Boolean(n),p=b(a),y=l(),w=e.useCallback(function(){if(d){if(d.layout&&d.layout.fit===t.Fit.Layout&&o){var e=y*d.layout.layoutScaleFactor;d.devicePixelRatioUsed=y,d.artboardWidth=(null==o?void 0:o.width)/e,d.artboardHeight=(null==o?void 0:o.height)/e}d.startRendering(),d.resizeToCanvas()}},[d,y]);g({riveLoaded:!!d,canvasElem:o,containerRef:c,options:p,onCanvasHasResized:w,artboardBounds:null==d?void 0:d.bounds});var m=e.useCallback(function(e){null===e&&o&&(o.height=0,o.width=0),s(e)},[]);e.useEffect(function(){if(o&&n){var e,r=null!=d;if(null==d){var a=p.useOffscreenRenderer;(e=new t.Rive(u(u({useOffscreenRenderer:a},n),{canvas:o}))).on(t.EventType.Load,function(){r=!0,o?v(e):e.cleanup()})}return function(){r||null==e||e.cleanup()}}},[o,h,d]);var C=e.useCallback(function(e){c.current=e},[]),x={observe:e.useCallback(function(e,t){R().registerCallback(e,t)},[]),unobserve:e.useCallback(function(e){R().removeCallback(e)},[])},O=x.observe,V=x.unobserve;e.useEffect(function(){var e,t=!1,n=function(){if(o&&t){var e=o.getBoundingClientRect();e.width>0&&e.height>0&&e.top<(window.innerHeight||document.documentElement.clientHeight)&&e.bottom>0&&e.left<(window.innerWidth||document.documentElement.clientWidth)&&e.right>0&&(null==d||d.startRendering(),t=!1)}};return o&&!1!==p.shouldUseIntersectionObserver&&O(o,function(r){r.isIntersecting?d&&d.startRendering():d&&d.stopRendering(),t=!r.isIntersecting,clearTimeout(e),r.isIntersecting||0!==r.boundingClientRect.width||(e=setTimeout(n,10))}),function(){o&&V(o)}},[O,V,d,o,p.shouldUseIntersectionObserver]),e.useEffect(function(){return function(){d&&(d.cleanup(),v(null))}},[d,o]);var k=null==n?void 0:n.animations;e.useEffect(function(){d&&k&&(d.isPlaying?(d.stop(d.animationNames),d.play(k)):d.isPaused&&(d.stop(d.animationNames),d.pause(k)))},[k,d]);var P=e.useCallback(function(e){return r.default.createElement(E,u({setContainerRef:C,setCanvasRef:m},e))},[m,C]);return{canvas:o,container:c.current,setCanvasRef:m,setContainerRef:C,rive:d,RiveComponent:P}}function O(t,n,r){var a=e.useState(null),i=a[0],o=a[1],l=e.useState(r.defaultValue),s=l[0],c=l[1],f=e.useState(null),d=f[0],v=f[1],h=e.useRef(null),p=e.useRef(t),b=e.useRef(r);e.useEffect(function(){b.current=r},[r]);var g=e.useCallback(function(){var e=h.current,t=p.current,n=b.current;if(!e||!t)return o(null),c(n.defaultValue),v(null),function(){};var r=n.getProperty(e,t);if(r){o(r),c(n.getValue(r)),n.getExtendedData&&v(n.getExtendedData(r));var u=function(){c(n.getValue(r)),n.getExtendedData&&v(n.getExtendedData(r)),n.onPropertyEvent&&n.onPropertyEvent()};return r.on(u),function(){r.off(u)}}return function(){}},[]);e.useEffect(function(){return h.current=n,p.current=t,g()},[n,t,g]);var y=e.useCallback(function(e){if(i&&h.current===n)try{return e(i),void(b.current.getExtendedData&&v(b.current.getExtendedData(i)))}catch(e){}if(h.current)try{var t=b.current.getProperty(h.current,p.current);t&&(o(t),e(t),b.current.getExtendedData&&v(b.current.getExtendedData(t)))}catch(e){}},[i,n]),w=e.useMemo(function(){return b.current.buildPropertyOperations(y)},[y]),m=u({value:s},w);return r.getExtendedData&&(m.extendedData=d),m}exports.default=function(e){var t=e.src,n=e.artboard,i=e.animations,o=e.stateMachines,l=e.layout,s=e.useOffscreenRenderer,c=void 0===s||s,f=e.shouldDisableRiveListeners,d=void 0!==f&&f,v=e.shouldResizeCanvasToContainer,h=void 0===v||v,p=e.automaticallyHandleEvents,b=void 0!==p&&p,g=e.children,y=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),w=x({src:t,artboard:n,animations:i,layout:l,stateMachines:o,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:b},{useOffscreenRenderer:c,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(w,u({},y),g)},exports.useResizeCanvas=g,exports.useRive=x,exports.useRiveFile=function(n){var r=this,u=e.useState(null),a=u[0],l=u[1],s=e.useState("idle"),c=s[0],f=s[1];return e.useEffect(function(){var e=null;return i(r,void 0,void 0,function(){return o(this,function(r){try{f("loading"),(e=new t.RiveFile(n)).init(),e.on(t.EventType.Load,function(){null==e||e.getInstance(),l(e),f("success")}),e.on(t.EventType.LoadError,function(){f("failed")}),l(e)}catch(e){console.error(e),f("failed")}return[2]})}),function(){null==e||e.cleanup()}},[n.src,n.buffer]),{riveFile:a,status:c}},exports.useStateMachineInput=function(n,r,u,a){var i=e.useState(null),o=i[0],l=i[1];return e.useEffect(function(){function e(){if(n&&r&&u||l(null),n&&r&&u){var e=n.stateMachineInputs(r);if(e){var t=e.find(function(e){return e.name===u});void 0!==a&&t&&(t.value=a),l(t||null)}}else l(null)}e(),n&&n.on(t.EventType.Load,function(){e()})},[n]),o},exports.useViewModel=function(n,r){var u=null!=r?r:{},a=u.name,i=u.useDefault,o=void 0!==i&&i,l=e.useState(null),s=l[0],c=l[1];return e.useEffect(function(){function e(){var e;if(n){var t=null;t=null!=a?(null===(e=n.viewModelByName)||void 0===e?void 0:e.call(n,a))||null:n.defaultViewModel()||null,c(t)}else c(null)}return e(),n&&n.on(t.EventType.Load,e),function(){n&&n.off(t.EventType.Load,e)}},[n,a,o]),s},exports.useViewModelInstance=function(t,n){var r=null!=n?n:{},u=r.name,a=r.useDefault,i=void 0!==a&&a,o=r.useNew,l=void 0!==o&&o,s=r.rive,c=e.useState(null),f=c[0],d=c[1];return e.useEffect(function(){var e,n,r;if(t){var a=null;a=null!=u?t.instanceByName(u)||null:i?(null===(e=t.defaultInstance)||void 0===e?void 0:e.call(t))||null:l?(null===(n=t.instance)||void 0===n?void 0:n.call(t))||null:(null===(r=t.defaultInstance)||void 0===r?void 0:r.call(t))||null,d(a),s&&a&&s.viewModelInstance!==a&&s.bindViewModelInstance(a)}else d(null)},[t,u,i,l,s]),f},exports.useViewModelInstanceBoolean=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.boolean(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceColor=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.color(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})},setRgb:function(t,n,r){e(function(e){e.rgb(t,n,r)})},setRgba:function(t,n,r,u){e(function(e){e.rgba(t,n,r,u)})},setAlpha:function(t){e(function(e){e.alpha(t)})},setOpacity:function(t){e(function(e){e.opacity(t)})}}},[])});return{value:r.value,setValue:r.setValue,setRgb:r.setRgb,setRgba:r.setRgba,setAlpha:r.setAlpha,setOpacity:r.setOpacity}},exports.useViewModelInstanceEnum=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.enum(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,getExtendedData:e.useCallback(function(e){return e.values},[]),buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,values:r.extendedData||[],setValue:r.setValue}},exports.useViewModelInstanceNumber=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.number(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceString=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.string(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceTrigger=function(t,n,r){var u=(null!=r?r:{}).onTrigger;return{trigger:O(t,n,{getProperty:e.useCallback(function(e,t){return e.trigger(t)},[]),getValue:e.useCallback(function(){},[]),defaultValue:null,onPropertyEvent:u,buildPropertyOperations:e.useCallback(function(e){return{trigger:function(){e(function(e){e.trigger()})}}},[])}).trigger}},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"),t=require("@rive-app/webgl2");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/n(e),u=function(){return u=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var u in t=arguments[n])Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u]);return e},u.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 u=0;for(r=Object.getOwnPropertySymbols(e);u<r.length;u++)t.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(e,r[u])&&(n[r[u]]=e[r[u]])}return n}function i(e,t,n,r){return new(n||(n=Promise))(function(u,a){function i(e){try{l(r.next(e))}catch(e){a(e)}}function o(e){try{l(r.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?u(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(i,o)}l((r=r.apply(e,t||[])).next())})}function o(e,t){var n,r,u,a,i={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return a={next:o(0),throw:o(1),return:o(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function o(a){return function(o){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,r&&(u=2&a[0]?r.return:a[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,a[1])).done)return u;switch(r=0,u&&(a=[2&a[0],u.value]),a[0]){case 0:case 1:u=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(u=i.trys,(u=u.length>0&&u[u.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!u||a[1]>u[0]&&a[1]<u[3])){i.label=a[1];break}if(6===a[0]&&i.label<u[1]){i.label=u[1],u=a;break}if(u&&i.label<u[2]){i.label=u[2],i.ops.push(a);break}u[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],r=0}finally{n=u=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,o])}}}function l(t){var n=t||s(),r=e.useState(n),u=r[0],a=r[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=t||s();a(e)},n=window.matchMedia("screen and (resolution: ".concat(u,"dppx)"));return n.hasOwnProperty("addEventListener")?n.addEventListener("change",e):n.addListener(e),function(){n.hasOwnProperty("removeEventListener")?n.removeEventListener("change",e):n.removeListener(e)}}},[u,t]),u}function s(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}var c=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var f=globalThis.ResizeObserver||c,d=void 0!==globalThis.ResizeObserver,v=!d;function h(t,n){void 0===n&&(n=!0);var r=e.useState({width:0,height:0}),u=r[0],a=r[1];e.useEffect(function(){if("undefined"!=typeof window&&n){var e=function(){a({width:window.innerWidth,height:window.innerHeight})};return v&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var i,o,l,s=e.useRef(new f((i=function(e){d&&a({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},o=0,l=0,function(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];clearTimeout(l),l=window.setTimeout(function(){return i.apply(e,t)},o)})));return e.useEffect(function(){var e=s.current;if(n){var r=t.current;return t.current&&d&&e.observe(t.current),function(){e.disconnect(),r&&d&&e.unobserve(r)}}e.disconnect()},[t,s]),u}var p={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function b(e){return Object.assign({},p,e)}function g(t){var n=t.riveLoaded,r=void 0!==n&&n,u=t.canvasElem,a=t.containerRef,i=t.options,o=void 0===i?{}:i,s=t.onCanvasHasResized,c=t.artboardBounds,f=b(o),d=e.useState({height:0,width:0}),v=d[0],p=v.height,g=v.width,y=d[1],w=e.useState({height:0,width:0}),m=w[0],R=m.height,C=m.width,E=w[1],x=e.useState(!0),O=x[0],V=x[1],k=f.fitCanvasToArtboardHeight,P=f.shouldResizeCanvasToContainer,M=f.useDevicePixelRatio,T=f.customDevicePixelRatio,S=h(a,P),D=l(T),I=null!=c?c:{},L=I.maxX,z=I.maxY,H=e.useCallback(function(){var e,t,n,r,u=null!==(t=null===(e=a.current)||void 0===e?void 0:e.clientWidth)&&void 0!==t?t:0,i=null!==(r=null===(n=a.current)||void 0===n?void 0:n.clientHeight)&&void 0!==r?r:0;return k&&c?{width:u,height:u*(c.maxY/c.maxX)}:{width:u,height:i}},[a,k,L,z]);e.useEffect(function(){if(P&&a.current&&r){var e=H(),t=e.width,n=e.height,i=!1;if(u){var o=t!==g||n!==p;if(f.fitCanvasToArtboardHeight&&o&&(a.current.style.height=n+"px",i=!0),f.useDevicePixelRatio){if(o||(t*D!==C||n*D!==R)){var l=D*t,c=D*n;u.width=l,u.height=c,u.style.width=t+"px",u.style.height=n+"px",E({width:l,height:c}),i=!0}}else o&&(u.width=t,u.height=n,E({width:t,height:n}),i=!0);y({width:t,height:n})}s&&(O||i)&&s&&s(),O&&V(!1)}},[u,a,S,D,H,O,V,R,C,p,g,s,P,k,M,r]),e.useEffect(function(){E({width:0,height:0})},[u])}var y,w=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}(),m=globalThis.IntersectionObserver||w,R=function(){function e(){var e=this;this.elementsMap=new Map,this.onObserved=function(t){t.forEach(function(t){var n=e.elementsMap.get(t.target);n&&n(t)})},this.observer=new m(this.onObserved)}return e.prototype.registerCallback=function(e,t){this.observer.observe(e),this.elementsMap.set(e,t)},e.prototype.removeCallback=function(e){this.observer.unobserve(e),this.elementsMap.delete(e)},e}(),C=function(){return y||(y=new R),y};function E(e){var t=e.setContainerRef,n=e.setCanvasRef,i=e.className,o=void 0===i?"":i,l=e.style,s=e.children,c=a(e,["setContainerRef","setCanvasRef","className","style","children"]),f=u({width:"100%",height:"100%"},l);return r.default.createElement("div",u({ref:t,className:o},!o&&{style:f}),r.default.createElement("canvas",u({ref:n,style:{verticalAlign:"top",width:0,height:0}},c),s))}function x(n,i){void 0===i&&(i={});var o=e.useState(null),s=o[0],c=o[1],f=e.useRef(null),d=e.useRef(null),v=e.useState(null),h=v[0],p=v[1],y=Boolean(n),w=b(i),m=l(),R=e.useCallback(function(){if(h){if(h.layout&&h.layout.fit===t.Fit.Layout&&s){var e=m*h.layout.layoutScaleFactor;h.devicePixelRatioUsed=m,h.artboardWidth=(null==s?void 0:s.width)/e,h.artboardHeight=(null==s?void 0:s.height)/e}h.startRendering(),h.resizeToCanvas()}},[h,m]);g({riveLoaded:!!h,canvasElem:s,containerRef:f,options:w,onCanvasHasResized:R,artboardBounds:null==h?void 0:h.bounds});var x=e.useCallback(function(e){null===e&&s&&(s.height=0,s.width=0),c(e)},[]);e.useEffect(function(){if(s&&n){var e,r=null!=h;if(null==h){var i=w.useOffscreenRenderer,o=n.onRiveReady,l=a(n,["onRiveReady"]);e=new t.Rive(u(u({useOffscreenRenderer:i},l),{canvas:s})),null!=d.current&&d.current.cleanup(),d.current=e,e.on(t.EventType.Load,function(){r=!0,o&&o(e),s?p(e):e.cleanup()})}return function(){r||null==e||e.cleanup()}}},[s,y,h]);var O=e.useCallback(function(e){f.current=e},[]),V={observe:e.useCallback(function(e,t){C().registerCallback(e,t)},[]),unobserve:e.useCallback(function(e){C().removeCallback(e)},[])},k=V.observe,P=V.unobserve;e.useEffect(function(){var e,t=!1,n=function(){if(s&&t){var e=s.getBoundingClientRect();e.width>0&&e.height>0&&e.top<(window.innerHeight||document.documentElement.clientHeight)&&e.bottom>0&&e.left<(window.innerWidth||document.documentElement.clientWidth)&&e.right>0&&(null==h||h.startRendering(),t=!1)}};return s&&!1!==w.shouldUseIntersectionObserver&&k(s,function(r){r.isIntersecting?h&&h.startRendering():h&&h.stopRendering(),t=!r.isIntersecting,clearTimeout(e),r.isIntersecting||0!==r.boundingClientRect.width||(e=setTimeout(n,10))}),function(){s&&P(s)}},[k,P,h,s,w.shouldUseIntersectionObserver]),e.useEffect(function(){return function(){h&&(h.cleanup(),p(null))}},[h,s]),e.useEffect(function(){return function(){null!=d.current&&d.current.cleanup()}},[]);var M=null==n?void 0:n.animations;e.useEffect(function(){h&&M&&(h.isPlaying?(h.stop(h.animationNames),h.play(M)):h.isPaused&&(h.stop(h.animationNames),h.pause(M)))},[M,h]);var T=e.useCallback(function(e){return r.default.createElement(E,u({setContainerRef:O,setCanvasRef:x},e))},[x,O]);return{canvas:s,container:f.current,setCanvasRef:x,setContainerRef:O,rive:h,RiveComponent:T}}function O(t,n,r){var a=e.useState(null),i=a[0],o=a[1],l=e.useState(r.defaultValue),s=l[0],c=l[1],f=e.useState(null),d=f[0],v=f[1],h=e.useRef(null),p=e.useRef(t),b=e.useRef(r);e.useEffect(function(){b.current=r},[r]);var g=e.useCallback(function(){var e=h.current,t=p.current,n=b.current;if(!e||!t)return o(null),c(n.defaultValue),v(null),function(){};var r=n.getProperty(e,t);if(r){o(r),c(n.getValue(r)),n.getExtendedData&&v(n.getExtendedData(r));var u=function(){c(n.getValue(r)),n.getExtendedData&&v(n.getExtendedData(r)),n.onPropertyEvent&&n.onPropertyEvent()};return r.on(u),function(){r.off(u)}}return function(){}},[]);e.useEffect(function(){return h.current=n,p.current=t,g()},[n,t,g]);var y=e.useCallback(function(e){if(i&&h.current===n)try{return e(i),void(b.current.getExtendedData&&v(b.current.getExtendedData(i)))}catch(e){}if(h.current)try{var t=b.current.getProperty(h.current,p.current);t&&(o(t),e(t),b.current.getExtendedData&&v(b.current.getExtendedData(t)))}catch(e){}},[i,n]),w=e.useMemo(function(){return b.current.buildPropertyOperations(y)},[y]),m=u({value:s},w);return r.getExtendedData&&(m.extendedData=d),m}exports.default=function(e){var t=e.src,n=e.artboard,i=e.animations,o=e.stateMachines,l=e.layout,s=e.useOffscreenRenderer,c=void 0===s||s,f=e.shouldDisableRiveListeners,d=void 0!==f&&f,v=e.shouldResizeCanvasToContainer,h=void 0===v||v,p=e.automaticallyHandleEvents,b=void 0!==p&&p,g=e.children,y=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),w=x({src:t,artboard:n,animations:i,layout:l,stateMachines:o,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:b},{useOffscreenRenderer:c,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(w,u({},y),g)},exports.useResizeCanvas=g,exports.useRive=x,exports.useRiveFile=function(n){var r=this,u=e.useState(null),a=u[0],l=u[1],s=e.useState("idle"),c=s[0],f=s[1];return e.useEffect(function(){var e=null;return i(r,void 0,void 0,function(){return o(this,function(r){try{f("loading"),(e=new t.RiveFile(n)).init(),e.on(t.EventType.Load,function(){null==e||e.getInstance(),l(e),f("success")}),e.on(t.EventType.LoadError,function(){f("failed")}),l(e)}catch(e){console.error(e),f("failed")}return[2]})}),function(){null==e||e.cleanup()}},[n.src,n.buffer]),{riveFile:a,status:c}},exports.useStateMachineInput=function(n,r,u,a){var i=e.useState(null),o=i[0],l=i[1];return e.useEffect(function(){function e(){if(n&&r&&u||l(null),n&&r&&u){var e=n.stateMachineInputs(r);if(e){var t=e.find(function(e){return e.name===u});void 0!==a&&t&&(t.value=a),l(t||null)}}else l(null)}e(),n&&n.on(t.EventType.Load,function(){e()})},[n]),o},exports.useViewModel=function(n,r){var u=null!=r?r:{},a=u.name,i=u.useDefault,o=void 0!==i&&i,l=e.useState(null),s=l[0],c=l[1];return e.useEffect(function(){function e(){var e;if(n){var t=null;t=null!=a?(null===(e=n.viewModelByName)||void 0===e?void 0:e.call(n,a))||null:n.defaultViewModel()||null,c(t)}else c(null)}return e(),n&&n.on(t.EventType.Load,e),function(){n&&n.off(t.EventType.Load,e)}},[n,a,o]),s},exports.useViewModelInstance=function(t,n){var r=null!=n?n:{},u=r.name,a=r.useDefault,i=void 0!==a&&a,o=r.useNew,l=void 0!==o&&o,s=r.rive,c=e.useState(null),f=c[0],d=c[1];return e.useEffect(function(){var e,n,r;if(t){var a=null;a=null!=u?t.instanceByName(u)||null:i?(null===(e=t.defaultInstance)||void 0===e?void 0:e.call(t))||null:l?(null===(n=t.instance)||void 0===n?void 0:n.call(t))||null:(null===(r=t.defaultInstance)||void 0===r?void 0:r.call(t))||null,d(a),s&&a&&s.viewModelInstance!==a&&s.bindViewModelInstance(a)}else d(null)},[t,u,i,l,s]),f},exports.useViewModelInstanceBoolean=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.boolean(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceColor=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.color(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})},setRgb:function(t,n,r){e(function(e){e.rgb(t,n,r)})},setRgba:function(t,n,r,u){e(function(e){e.rgba(t,n,r,u)})},setAlpha:function(t){e(function(e){e.alpha(t)})},setOpacity:function(t){e(function(e){e.opacity(t)})}}},[])});return{value:r.value,setValue:r.setValue,setRgb:r.setRgb,setRgba:r.setRgba,setAlpha:r.setAlpha,setOpacity:r.setOpacity}},exports.useViewModelInstanceEnum=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.enum(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,getExtendedData:e.useCallback(function(e){return e.values},[]),buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,values:r.extendedData||[],setValue:r.setValue}},exports.useViewModelInstanceNumber=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.number(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceString=function(t,n){var r=O(t,n,{getProperty:e.useCallback(function(e,t){return e.string(t)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceTrigger=function(t,n,r){var u=(null!=r?r:{}).onTrigger;return{trigger:O(t,n,{getProperty:e.useCallback(function(e,t){return e.trigger(t)},[]),getValue:e.useCallback(function(){},[]),defaultValue:null,onPropertyEvent:u,buildPropertyOperations:e.useCallback(function(e){return{trigger:function(){e(function(e){e.trigger()})}}},[])}).trigger}},Object.keys(t).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});

package/dist/types/types.d.ts

@@ -1,6 +1,8 @@
 import { Rive, RiveFile, RiveFileParameters, RiveParameters } from '@rive-app/webgl2';
 import { ComponentProps, RefCallback } from 'react';
-export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
+export type UseRiveParameters = (Partial<Omit<RiveParameters, 'canvas'>> & {
+    onRiveReady?: (rive: Rive) => void;
+}) | null;
 export type UseRiveOptions = {
     useDevicePixelRatio: boolean;
     customDevicePixelRatio: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.21.3",
+  "version": "4.21.4",
   "description": "React wrapper around the @rive-app/webgl2 library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/webgl2": "2.29.3"
+    "@rive-app/webgl2": "2.30.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"