matter-dom-plugin/build/matter-dom-plugin.min.js

A plugin to apply matter.js's physics to DOM elements

/*!
 * matter-dom-plugin 0.1.2 by Edgar Lopez-Garci 2017-07-08
 * https://github.com/elopezga/matter-dom-plugin
 * License MIT
 */
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("matter-js")):"function"==typeof define&&define.amd?define(["matter-js"],n):"object"==typeof exports?exports.MatterDomPlugin=n(require("matter-js")):e.MatterDomPlugin=n(e.Matter)}(this,function(e){return function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var t={};return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/libs",n(n.s=6)}([function(e,n,t){"use strict";var o={};e.exports=function(e){var n=(e.Vertices,e.Vector,e.Sleeping,e.Render,e.Common),t=(e.Bounds,e.Axes,e.Body);e.Events;return o=n.clone(t,!0),o.create=function(e){return t.create.apply(null,arguments)},o.setVertices=function(e,n){t.setVertices.apply(null,arguments)},o.setPosition=function(e,n){t.setPosition.apply(null,arguments)},o.setAngle=function(e,n){t.setAngle.apply(null,arguments)},o.scale=function(e,n,o,i){t.scale.apply(null,arguments)},o.update=function(e,n,o,i){t.update.apply(null,arguments)},o}},function(e,n,t){"use strict";var o={};e.exports=function(e){var n=(e.Vertices,e.Sleeping),t=e.Mouse,i=e.Events,r=(e.Detector,e.Constraint),a=e.Composite,l=e.Common,s=e.Bounds;o.create=function(e,n){var s=(e?e.mouse:null)||(n?n.mouse:null);s||(e&&e.render&&e.render.canvas?s=t.create(e.render.canvas):n&&n.element?s=t.create(n.element):(s=t.create(),l.warn("MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected")));var d=r.create({label:"Mouse Constraint",pointA:s.position,pointB:{x:0,y:0},length:.01,stiffness:.1,angularStiffness:1,render:{strokeStyle:"#90EE90",lineWidth:3}}),c={type:"mouseConstraint",mouse:s,element:null,body:null,constraint:d,collisionFilter:{category:1,mask:4294967295,group:0}},m=l.extend(c,n);return i.on(e,"beforeUpdate",function(){var n=a.allBodies(e.world);o.update(m,n),u(m)}),m},o.update=function(e,t){var o,r=e.mouse,a=e.constraint,l=e.body;if(0===r.button)if(a.bodyB)n.set(a.bodyB,!1),o=l.Dom.render.mapping.viewToWorld(r.position),a.pointA=o;else for(var u=(document.querySelectorAll("[matter]"),0);u<t.length;u++){l=t[u],o=l.Dom.render.mapping.viewToWorld(r.position);l.Dom.render.mapping.worldToView(l.position);if(s.contains(l.bounds,o)){a.pointA=o,a.bodyB=e.body=l,a.pointB={x:0,y:0},a.angleB=l.angle;break}}else a.bodyB=e.body=null,a.pointB=null,l&&i.trigger(e,"enddrag",{mouse:r,body:l})};var u=function(e){var n=e.mouse,o=n.sourceEvents;o.mousemove&&i.trigger(e,"mousemove",{mouse:n}),o.mousedown&&i.trigger(e,"mousedown",{mouse:n}),o.mouseup&&i.trigger(e,"mouseup",{mouse:n}),t.clearSourceEvents(n)};return o}},function(e,n,t){"use strict";e.exports=function(e){var n=(e.World,e.Sleeping,e.Resolver,e.Render,e.Pair,e.Metrics,e.Grid,e.Events,e.Composite),t=(e.Constraint,e.Common,e.Body,e.DomBody),o=e.Engine,i=o.update;o.update=function(e,t,o){i(e,t,o),t=t||1e3/60,o=o||1;var a=e.world,l=e.timing,s=n.allBodies(a);return r(s,t,l.timeScale,o,a.bounds),e};var r=function(e,n,o,i,r){for(var a=0;a<e.length;a++){var l=e[a];l.isStatic||l.isSleeping||t.update(l,n,o,i)}}}},function(e,n,t){"use strict";var o={};e.exports=function(e){var n=(e.Body,e.Bodies),t=e.DomBody,i=e.Vertices,r=e.Common,a=e.World;e.Bounds,e.Vector;return o.create=function(e){var n=e.bodyType,t=e.el,i=e.render,r=e.position;delete e.bodyType,delete e.render,delete e.position,e.domRenderer=i;var l=null,s=document.querySelector(t),u=i.mapping.viewToWorld({x:r.x,y:r.y});if("block"==n){var d=i.mapping.viewToWorld({x:s.offsetWidth,y:s.offsetHeight});l=o.OGblock(u.x,u.y,d.x,d.y,e)}else if("circle"==n){var c=i.mapping.viewToWorld(s.offsetWidth/2);l=o.circle(u.x,u.y,c,e)}return l&&a.add(i.engine.world,[l]),l},o.OGblock=function(e,n,o,a,l){var l=l||{},s={label:"Block Body",position:{x:e,y:n},vertices:i.fromPath("L 0 0 L "+o+" 0 L "+o+" "+a+" L 0 "+a)};if(l.chamfer){var u=option.chamfer;s.vertices=i.chamfer(s.vertices,u.radius,u.quality,u.qualityMin,u.qualityMax),delete l.chamfer}return t.create(r.extend({},s,l))},o.block=function(e,n,o){var a={Dom:{element:null,render:null}},o=o||{};o=r.extend(a,o);var l=o.Dom.render,s=o.Dom.element,u=l.mapping.viewToWorld({x:e,y:n}),d=l.mapping.viewToWorld({x:s.offsetWidth,y:s.offsetHeight}),c={label:"DOM Block Body",position:{x:u.x,y:u.y},vertices:i.fromPath("L 0 0 L "+d.x+" 0 L "+d.x+" "+d.y+" L 0 "+d.y)};if(o.chamfer){var m=option.chamfer;c.vertices=i.chamfer(c.vertices,m.radius,m.quality,m.qualityMin,m.qualityMax),delete o.chamfer}return t.create(r.extend({},c,o))},o.circle=function(e,n,t,i,a){i=i||{};var l={label:"Circle Body",circleRadius:t};a=a||25;var s=Math.ceil(Math.max(10,Math.min(a,t)));return s%2==1&&(s+=1),o.polygon(e,n,s,t,r.extend({},l,i))},o.polygon=function(e,o,a,l,s){if(s=s||{},a<3)return n.circle(e,o,l,s);for(var u=2*Math.PI/a,d="",c=.5*u,m=0;m<a;m+=1){var p=c+m*u,f=Math.cos(p)*l,g=Math.sin(p)*l;d+="L "+f.toFixed(3)+" "+g.toFixed(3)+" "}var y={label:"Polygon Body",position:{x:e,y:o},vertices:i.fromPath(d)};if(s.chamfer){var w=s.chamfer;y.vertices=i.chamfer(y.vertices,w.radius,w.quality,w.qualityMin,w.qualityMax),delete s.chamfer}return t.create(r.extend({},y,s))},o}},function(e,n,t){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i={};e.exports=function(e){var n,t,r=e.Common,a=e.Composite,l=e.Events,s=e.Render;return"undefined"!=typeof window&&(n=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(function(){e(r.now())},1e3/60)},t=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame),i.create=function(e){var n={engine:null,element:window,controller:i,frameRequestId:null,options:{}},t=e.engine,a=r.extend(n,e);a.mapping={},a.mapping.ratioMultiplier=1/6,a.mapping.VIEW={width:window.innerWidth,height:window.innerHeight},a.mapping.VIEW.center={x:a.mapping.VIEW.width/2,y:a.mapping.VIEW.height/2},a.mapping.WORLD={width:a.mapping.VIEW.width*a.mapping.ratioMultiplier,height:a.mapping.VIEW.height*a.mapping.ratioMultiplier},a.mapping.WORLD.center={x:a.mapping.WORLD.width/2,y:a.mapping.WORLD.height/2},a.mapping.viewToWorld=function(e){return"object"===(void 0===e?"undefined":o(e))&&null!==e?{x:a.mapping.ratioMultiplier*e.x,y:a.mapping.ratioMultiplier*e.y}:a.mapping.ratioMultiplier*e},a.mapping.worldToView=function(e){return"object"===(void 0===e?"undefined":o(e))&&null!==e?{x:e.x/a.mapping.ratioMultiplier,y:e.y/a.mapping.ratioMultiplier}:e/a.mapping.ratioMultiplier},document.querySelector("#debug").style.position="absolute";var l=s.create({element:document.querySelector("#debug"),engine:t,options:{width:a.mapping.WORLD.width,height:a.mapping.WORLD.height,background:"#fafafa",wireframeBackground:"#222",hasBounds:!1,enabled:!0,wireframes:!0,showSleeping:!0,showDebug:!1,showBroadphase:!1,showBounds:!1,showVelocity:!1,showCollisions:!1,showAxes:!1,showPositions:!1,showAngleIndicator:!1,showIds:!1,showShadows:!1}});return s.run(l),a.DebugRender=l,a},i.run=function(e){!function t(o){e.frameRequestId=n(t),i.world(e)}()},i.stop=function(e){t(e.frameRequestId)},i.world=function(e){var n=e.engine,t=n.world,o=(a.allBodies(t),a.allConstraints(t),document.querySelectorAll("[matter]")),r={timestamp:n.timing.timestamp};l.trigger(e,"beforeRender",r),i.bodies(e,o)},i.bodies=function(e,n,t){for(var o=e.engine,i=o.world,r=(e.options,a.allBodies(i)),l=0;l<r.length;l++)for(var s=r[l],u=s.parts.length>1?1:0;u<s.parts.length;u++){var d=s.parts[u],c=d.Dom.element,m=e.mapping.worldToView({x:d.position.x,y:d.position.y}),p={x:c.offsetWidth/2,y:c.offsetHeight/2};c.style.position="absolute",c.style.transform="translate("+(m.x-p.x)+"px, "+(m.y-p.y)+"px)",c.style.transform+="rotate("+s.angle+"rad)"}},i}},function(n,t){n.exports=e},function(e,n,t){"use strict";var o=t(5),i=t(4),r=t(0),a=t(3),l=t(1),s=t(2),u={name:"matter-dom-plugin",version:"0.1.2",for:"matter-js@^0.12.0",install:function(e){u.installRenderDom(e),u.installDomBody(e),u.installDomBodies(e),u.installDomMouseConstraint(e),u.installEngine(e)},installRenderDom:function(e){console.log("Installing RenderDom module."),e.RenderDom=i(e)},installDomBodies:function(e){console.log("Installing DomBodies module."),e.DomBodies=a(e)},installDomMouseConstraint:function(e){console.log("Installing DomMouseConstraint."),e.DomMouseConstraint=l(e)},installDomBody:function(e){console.log("Installing DomBody updates."),e.DomBody=r(e)},installEngine:function(e){console.log("Patching Engine."),s(e)}};o.Plugin.register(u),e.exports.MatterDomPlugin=u}])});