diff --git a/demo/js/Demo.js b/demo/js/Demo.js index cba8840..35c2139 100644 --- a/demo/js/Demo.js +++ b/demo/js/Demo.js @@ -14,13 +14,15 @@ Events = Matter.Events, Bounds = Matter.Bounds, Vector = Matter.Vector, - Vertices = Matter.Vertices; + Vertices = Matter.Vertices, + MouseConstraint = Matter.MouseConstraint; var Demo = {}; var _engine, _gui, _sceneName, + _mouseConstraint, _isMobile = /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent); // initialise the demo @@ -28,7 +30,7 @@ Demo.init = function() { var container = document.getElementById('canvas-container'); - // engine options + // some example engine options var options = { positionIterations: 6, velocityIterations: 4, @@ -39,6 +41,10 @@ // NOTE: this is actually Matter.Engine.create(), see the aliases at top of this file _engine = Engine.create(container, options); + // add a mouse controlled constraint + _mouseConstraint = MouseConstraint.create(_engine); + World.add(_engine.world, _mouseConstraint); + // run the engine Engine.run(_engine); @@ -659,9 +665,16 @@ demoReset = document.getElementById('demo-reset'); // create a dat.gui using Matter helper - if (!_isMobile) + if (!_isMobile) { _gui = Gui.create(_engine); + // need to add mouse constraint back in after gui clear or load is pressed + Events.on(_gui, 'clear load', function() { + _mouseConstraint = MouseConstraint.create(_engine); + World.add(_engine.world, _mouseConstraint); + }); + } + // go fullscreen when using a mobile device if (_isMobile) { var body = document.body; @@ -795,6 +808,9 @@ Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }), Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }) ]); + + _mouseConstraint = MouseConstraint.create(_engine); + World.add(_world, _mouseConstraint); var renderOptions = _engine.render.options; renderOptions.wireframes = true; diff --git a/src/body/Composite.js b/src/body/Composite.js index 59b8164..67872b4 100644 --- a/src/body/Composite.js +++ b/src/body/Composite.js @@ -89,6 +89,9 @@ var Composite = {}; case 'composite': Composite.addComposite(composite, obj); break; + case 'mouseConstraint': + Composite.addConstraint(composite, obj.constraint); + break; } } @@ -122,6 +125,9 @@ var Composite = {}; case 'composite': Composite.removeComposite(composite, obj, deep); break; + case 'mouseConstraint': + Composite.removeConstraint(composite, obj.constraint); + break; } } diff --git a/src/constraint/MouseConstraint.js b/src/constraint/MouseConstraint.js index 41405f3..362c75d 100644 --- a/src/constraint/MouseConstraint.js +++ b/src/constraint/MouseConstraint.js @@ -11,10 +11,13 @@ var MouseConstraint = {}; /** * Description * @method create - * @param {mouse} mouse + * @param {engine} engine + * @param {} options * @return {MouseConstraint} A new MouseConstraint */ - MouseConstraint.create = function(mouse) { + MouseConstraint.create = function(engine, options) { + var mouse = engine.input.mouse; + var constraint = Constraint.create({ pointA: mouse.position, pointB: { x: 0, y: 0 }, @@ -27,12 +30,22 @@ var MouseConstraint = {}; } }); - return { + var defaults = { + type: 'mouseConstraint', mouse: mouse, dragBody: null, dragPoint: null, constraint: constraint }; + + var mouseConstraint = Common.extend(defaults, options); + + Events.on(engine, 'tick', function(event) { + var allBodies = Composite.allBodies(engine.world); + MouseConstraint.update(mouseConstraint, allBodies); + }); + + return mouseConstraint; }; /** diff --git a/src/core/Engine.js b/src/core/Engine.js index 1327f09..5710cbf 100644 --- a/src/core/Engine.js +++ b/src/core/Engine.js @@ -64,8 +64,6 @@ var Engine = {}; engine.pairs = Pairs.create(); engine.metrics = engine.metrics || Metrics.create(); engine.input.mouse = engine.input.mouse || Mouse.create(engine.render.canvas); - engine.mouseConstraint = engine.mouseConstraint || MouseConstraint.create(engine.input.mouse); - World.addConstraint(engine.world, engine.mouseConstraint.constraint); engine.broadphase = engine.broadphase || { current: 'grid', @@ -252,9 +250,6 @@ var Engine = {}; // applies gravity to all bodies Body.applyGravityAll(allBodies, world.gravity); - // update the mouse constraint - MouseConstraint.update(engine.mouseConstraint, allBodies, engine.input); - // update all body position and rotation by integration Body.updateAll(allBodies, delta * engine.timeScale, correction, world.bounds); @@ -351,8 +346,6 @@ var Engine = {}; Pairs.clear(engine.pairs); - World.addConstraint(engine.world, engine.mouseConstraint.constraint); - var broadphase = engine.broadphase[engine.broadphase.current]; if (broadphase.controller) { var bodies = Composite.allBodies(world); diff --git a/src/render/Gui.js b/src/render/Gui.js index 55b26ab..bc5ff75 100644 --- a/src/render/Gui.js +++ b/src/render/Gui.js @@ -69,12 +69,32 @@ var Gui = {}; var renderController = engine.render.controller; if (renderController.clear) renderController.clear(engine.render); + + /** + * Fired after the gui's clear button pressed + * + * @event clear + * @param {} event An event object + * @param {} event.source The source object of the event + * @param {} event.name The name of the event + */ + Events.trigger(gui, 'clear'); }, save: function() { if (localStorage && _serializer) { localStorage.setItem('world', _serializer.stringify(engine.world)); } + + /** + * Fired after the gui's save button pressed + * + * @event save + * @param {} event An event object + * @param {} event.source The source object of the event + * @param {} event.name The name of the event + */ + Events.trigger(gui, 'save'); }, load: function() { @@ -87,6 +107,16 @@ var Gui = {}; if (loadedWorld) { Engine.merge(engine, { world: loadedWorld }); } + + /** + * Fired after the gui's load button pressed + * + * @event load + * @param {} event An event object + * @param {} event.source The source object of the event + * @param {} event.name The name of the event + */ + Events.trigger(gui, 'load'); } }; @@ -169,9 +199,8 @@ var Gui = {}; engine.render.options = options; - // update mouse - engine.input.mouse = Mouse.create(engine.render.canvas); - engine.mouseConstraint.mouse = engine.input.mouse; + // bind the mouse to the new canvas + Mouse.setElement(engine.input.mouse, engine.render.canvas); }); render.add(engine.render.options, 'wireframes');