removed default MouseConstraint from engine, now must be manually added by user (see demo)

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;

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;
 
             }
         }

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;
     };
 
     /**

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);

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');