UNPKG

react-matter-js

Version:

React adapter for the Matter.js physics engine

3 lines (2 loc) 10.7 kB
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("matter-js")),o=require("tuplerone"),i=require("@react-hook/window-size"),u=require("emotion");require("pathseg");var c=function(e){return t.memo(e,s)},a=function(e){return!e[0].startsWith("_")},s=function(e,t){return o.ValueObject(e,a)===o.ValueObject(t,a)},l=function(e){return function(t){return t.render.options.width*e}},f=function(e){return function(t){return t.render.options.height*e}},d=function(e,t){return"function"==typeof e?e(t):e},h=function(e){var t,n=P();return t=function(e){return[e[0],d(e[1],n)]},Object.fromEntries(Object.entries(e).map(t))};function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function v(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function y(e){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,t){return(g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function b(e,t,n){return(b=m()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&g(o,n.prototype),o}).apply(null,arguments)}function w(e){var t="function"==typeof Map?new Map:void 0;return(w=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return b(e,arguments,y(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),g(n,e)})(e)}function x(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}function E(e,t){return t||(t=e.slice(0)),e.raw=t,e}var O=function(e){function t(t){var n;return(n=e.call(this)||this).init=t,n}return v(t,e),t.prototype.get=function(t){if(!this.has(t)){var n=this.init(t);return this.set(t,n),n}return e.prototype.get.call(this,t)},t}(w(Map)),j=function(e){function t(t){var n;return void 0===t&&(t=new Set),(n=e.call(this)||this).subs=t,n}v(t,e);var n=t.prototype;return n.add=function(t){var n=this;return e.prototype.add.call(this,t),this.subs.forEach((function(e){return e(n)})),this},n.delete=function(t){var n=this,r=e.prototype.delete.call(this,t);return r&&this.subs.forEach((function(e){return e(n)})),r},n.track=function(e){this.subs.add(e)},n.untrack=function(e){this.subs.delete(e)},n.clear=function(){var t=this;e.prototype.clear.call(this),this.subs.forEach((function(e){return e(t)})),this.subs.clear()},t}(w(Set)),R=Symbol("categories"),S=function(e){var n,r=P(),o=(n=t.useState()[1],t.useCallback((function(){return n(Symbol())}),[])),i=r[R].get(e);return t.useEffect((function(){return i.track(o),function(){i.untrack(o)}}),[i,o]),i},k=c((function(e){var i=e.options,u=e.children,c=t.useState(null),a=c[0],s=c[1];return t.useEffect((function(){var e=o.shallow(r.Engine.create(i));s(e);var t=function(e){var t=new O((function(){return new j}));e[R]=t;var n=function(e){var n,r=e.object;(null===(n=r[R])||void 0===n?void 0:n.length)&&r[R].forEach((function(e){t.get(e).add(r)}))},o=function(e){var n=e.object;n[R]&&n[R].forEach((function(e){t.get(e).delete(n)}))};return r.Events.on(e.world,"afterAdd",n),r.Events.on(e.world,"afterRemove",o),function(){r.Events.off(e.world,"afterAdd",n),r.Events.off(e.world,"afterRemove",o),t.forEach((function(e){e.clear()})),t.clear()}}(e);return function(){r.World.clear(e.world,!1),r.Engine.clear(e),e.enabled=!1,t(),s(null)}}),[i]),a?n.createElement(_,{value:a},u):null})),W=t.createContext(null),_=W.Provider,P=function(){return t.useContext(W)};function M(){var e=E(["\n display: block;\n width: ","px;\n position: relative;\n canvas {\n position: relative;\n display: block;\n z-index: 1;\n }\n "]);return M=function(){return e},e}var C=c((function(e){var i=e.options,c=e.enableMouse,a=void 0!==c&&c,s=e.mouseConstraintOptions,l=e.children,f=x(e,["options","enableMouse","mouseConstraintOptions","children"]),d=t.useRef(null),h=P(),v=t.useState(null),y=v[0],g=v[1],m=i.width;return t.useEffect((function(){var e=o.shallow(r.Render.create({element:d.current,engine:h,options:i}));h.render=e,g(e),r.Render.run(e);var t=o.shallow(r.Runner.create());if(r.Runner.run(t,h),a||s){var n=o.shallow(r.Mouse.create(e.canvas)),u=o.shallow(r.MouseConstraint.create(h,p({},s,{mouse:n})));r.World.add(h.world,u)}return function(){r.Render.stop(e),e.canvas.remove(),e.canvas=null,e.context=null,r.Runner.stop(t),e.textures={}}}),[h,i,s,a,g]),n.createElement("div",Object.assign({},f,{ref:d,className:u.css(M(),m)}),y?q(l,h):null)})),q=function e(t,n){return Array.isArray(t)?t.map((function(t){return e(t,n)})):"function"==typeof t?t(n):t},B=function(e){return Array.from(e,(function(e){return e[A].el}))},A=Symbol("clone"),V=Symbol("SVG clone"),z=Symbol("DOM clone");function D(){var e=E(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n fill: #f60;\n"]);return D=function(){return e},e}var I=c((function(e){var o=e.children,i=e.options,u=void 0===i?{}:i,c=x(e,["children","options","margin"]),a=u.width,s=u.height,l=function(){var e=P(),n=S(A),o=B(S(z)),i=B(S(V));return t.useEffect((function(){var t=function(){n.forEach((function(e){if(!e.isSleeping){var t=e.position,n=e[A].ref;n.current&&(n.current.style.transform="translate("+t.x+"px, "+t.y+"px) rotate("+e.angle+"rad)")}}))};return r.Events.on(e,"afterUpdate",t),function(){r.Events.off(e,"afterUpdate",t)}}),[n,e]),{dom:o,svg:i}}(),f=l.dom,d=l.svg;return n.createElement(C,Object.assign({},c,{options:u}),n.createElement("div",{className:F},f),n.createElement("svg",{viewBox:"0 0 "+a+" "+s,className:F},d),o)})),F=u.css(D()),N=c((function(e){var n=e.children,i=e.cats,u=void 0===i?[]:i,c=e.bodyRef,a=e.sizes,s=void 0===a?{}:a,l=P();return t.useEffect((function(){var e=o.shallow(n());return e[L]=s,c&&(c.current=e),e[R]=u,e[A]&&e[R].push(e[A].key,A),r.World.add(l.world,e),function(){r.World.remove(l.world,e),c&&(c.current=null)}}),[l,n,u,c,s]),null})),L=Symbol("sizes"),T=c((function(e){var o=e.x,i=e.y,u=e.width,c=e.height,a=e.clone,s=void 0!==a&&a,l=e.options,f=x(e,["x","y","width","height","clone","options"]);return n.createElement(N,Object.assign({},f),(function(){var e=r.Bodies.rectangle(o,i,u,c,l);if(s){var a=t.createRef(),f=n.createElement("rect",{x:-u/2,y:-c/2,width:u,height:c,ref:a,key:e.id});e[A]={key:V,ref:a,el:f}}return e}))})),U=c((function(e){var o=e.x,i=e.y,u=e.radius,c=e.clone,a=void 0!==c&&c,s=e.options,l=e.cloneProps,f=x(e,["x","y","radius","clone","options","cloneProps"]),d=h({x:o,y:i,radius:u});return n.createElement(N,Object.assign({},f),(function(){var e=r.Bodies.circle(d.x,d.y,d.radius,s);if(a){var o=t.createRef(),i=n.createElement("circle",Object.assign({cx:0,cy:0,r:d.radius,ref:o,key:e.id},l));e[A]={key:V,ref:o,el:i}}return e}))})),G=function(e){return e+"px"},H=c((function(e){var o=e.x,i=e.y,u=e.width,c=e.height,a=e.vertexSets,s=e.options,l=void 0===s?{}:s,f=e.flagInternal,d=void 0!==f&&f,h=e.cloneID,p=e.cloneProps,v=void 0===p?{}:p,y=x(e,["x","y","width","height","vertexSets","options","flagInternal","cloneID","cloneProps"]);return n.createElement(N,Object.assign({},y),(function(){var e=r.Bodies.fromVertices(o,i,a,l,d),s=t.createRef(),f=e.bounds,p=f.min,y=f.max,g=y.x-p.x,m=y.y-p.y,b=Math.min(u/g,c/m);r.Body.scale(e,b,b);var w=g*b*1.4,x=m*b*1.4,E=n.createElement("g",{ref:s,key:e.id},n.createElement("use",Object.assign({xlinkHref:"#"+h,width:G(w),height:G(x),x:G(-w/2),y:G(-x/2)},v)));return e[A]={key:V,ref:s,el:E},e}))})),X=function(e){var n=e.children,i=e.length,u=x(e,["children","length"]),c=P(),a=t.useRef(),s=t.useRef();return t.useEffect((function(){var e=o.shallow(r.Constraint.create(p({bodyA:a.current,bodyB:s.current,length:i},u)));return r.World.add(c.world,e),function(){r.World.remove(c.world,e)}}),[u,c,i]),[a,s].map((function(e,r){return t.cloneElement(n[r],{bodyRef:e,key:r})}))},Y=t.memo(X,s),J=function(e){var r=e.options,o=x(e,["options"]),i={options:p({},r,{isStatic:!0})},u=h(K(o)),c=u.x,a=u.y,s=u.width,l=u.height,f=u.wallWidth,d=p({},i,{x:c+s/2,y:a+f/2,width:s,height:f}),v=p({},i,{},d,{y:l-f/2}),y=p({},i,{x:c+f/2,y:a+l/2,height:l,width:f}),g=p({},i,{},y,{x:s-f/2});return n.createElement(t.Fragment,null,n.createElement(T,Object.assign({},d)),n.createElement(T,Object.assign({},v)),n.createElement(T,Object.assign({},y)),n.createElement(T,Object.assign({},g)))},K=function(e){var t=e.wallWidth;return{x:e.x,y:e.y,width:e.width,height:e.height,wallWidth:void 0===t?100:t}},Q=c((function(e){var t=e.width,r=e.height,o=e.pixelRatio,i=e.engineOptions,u=void 0===i?{}:i,c=e.rendererProps,a=void 0===c?{}:c,s=e.mouse,d=void 0===s||s,h=e.gravity,v=e.walled,y=void 0!==v&&v,g=e.wallWidth,m=void 0===g?50:g,b=e.children,w=p({width:void 0===t?720:t,height:void 0===r?540:r,background:"transparent",wireframeBackground:"transparent",pixelRatio:void 0===o?"auto":o},a.options),x=w.width+"-"+w.height,E=y?n.createElement(J,{x:-m,y:-m,width:function(e){return l(1)(e)+m},height:function(e){return f(1)(e)+m},wallWidth:m,options:{render:{visible:!1}}}):null;return n.createElement(k,{options:u,key:x},n.createElement(I,Object.assign({},a,{options:w,enableMouse:d}),E,(function(e){return Object.assign(e.world.gravity,h),b})))}));window.decomp=require("poly-decomp"),exports.Circle=U,exports.Constraint=Y,exports.Engine=k,exports.Rectangle=T,exports.Render=C,exports.RenderClones=I,exports.Scene=Q,exports.Shape=function(e){var t=e.paths,o=e.sampleLength,i=void 0===o?30:o,u=x(e,["paths","sampleLength"]);if(!t)return null;var c=t.map((function(e){return r.Svg.pathToVertices(e,i)}));return n.createElement(H,Object.assign({vertexSets:c},u))},exports.Vertices=H,exports.Walls=J,exports.WindowScene=function(e){var t,r={width:(t=i.useWindowSize())[0],height:t[1]};return n.createElement(Q,Object.assign({},e,{width:r.width,height:r.height}))},exports.relX=l,exports.relY=f,exports.useEngine=P; //# sourceMappingURL=react-matter-js.cjs.production.min.js.map