@rive-app/react-webgl2 4.21.5 → 4.22.0

package/dist/index.js

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

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

@@ -0,0 +1,10 @@
+import { ViewModelInstance } from '@rive-app/webgl2';
+import { UseViewModelInstanceArtboardResult } from '../types';
+/**
+ * Hook for interacting with artboard properties of a ViewModelInstance.
+ *
+ * @param path - Path to the artboard property (e.g. "targetArtboard" or "group/artboard")
+ * @param viewModelInstance - The ViewModelInstance containing the artboard property
+ * @returns An object with a setter function
+ */
+export default function useViewModelInstanceArtboard(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceArtboardResult;

package/dist/types/index.d.ts

@@ -13,7 +13,8 @@ import useViewModelInstanceImage from './hooks/useViewModelInstanceImage';
 import useViewModelInstanceList from './hooks/useViewModelInstanceList';
 import useResizeCanvas from './hooks/useResizeCanvas';
 import useRiveFile from './hooks/useRiveFile';
+import useViewModelInstanceArtboard from './hooks/useViewModelInstanceArtboard';
 export default Rive;
-export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile, useViewModel, useViewModelInstance, useViewModelInstanceNumber, useViewModelInstanceString, useViewModelInstanceBoolean, useViewModelInstanceColor, useViewModelInstanceEnum, useViewModelInstanceTrigger, useViewModelInstanceImage, useViewModelInstanceList, RiveProps, };
+export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile, useViewModel, useViewModelInstance, useViewModelInstanceNumber, useViewModelInstanceString, useViewModelInstanceBoolean, useViewModelInstanceColor, useViewModelInstanceEnum, useViewModelInstanceTrigger, useViewModelInstanceImage, useViewModelInstanceList, useViewModelInstanceArtboard, RiveProps, };
 export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions, } from './types';
 export * from '@rive-app/webgl2';

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { type decodeImage, Rive, RiveFile, RiveFileParameters, RiveParameters, ViewModelInstance } from '@rive-app/webgl2';
+import { type decodeImage, Rive, RiveFile, RiveFileParameters, RiveParameters, ViewModelInstance, ViewModelInstanceArtboard } from '@rive-app/webgl2';
 import { ComponentProps, RefCallback } from 'react';
 export type UseRiveParameters = (Partial<Omit<RiveParameters, 'canvas'>> & {
     onRiveReady?: (rive: Rive) => void;
@@ -225,3 +225,12 @@ export type UseViewModelInstanceListResult = {
      */
     swap: (a: number, b: number) => void;
 };
+export type UseViewModelInstanceArtboardResult = {
+    /**
+     * Set the value of the artboard.
+     * @param value - The artboard to set.
+     */
+    setValue: (value: ViewModelInstanceArtboard extends {
+        value: infer T;
+    } ? T : never) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.21.5",
+  "version": "4.22.0",
   "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.30.2"
+    "@rive-app/webgl2": "2.30.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"