How to use the matter-js.Events function in matter-js

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// On click, add a chip at the mouse's x and y relative to canvas
document.querySelector('canvas').addEventListener('click', function (e) {
  e.preventDefault();

  var chip = new _Chip2.default({ x: e.offsetX, y: e.offsetY });

  chip.addToEngine(_engine2.default.world);
  chip.addToRenderer(_renderer.stage);
  chip.registerUpdateListener(_engine2.default);
  _renderer.renderer.render(_renderer.stage);
});

// Collision Events
_matterJs.Events.on(_engine2.default, 'collisionStart', function (event) {
  var pairs = event.pairs;

  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i];
    console.log(pair.bodyA.sprite.tint);
    console.log(pair.bodyB.sprite.tint);

    if (pair.bodyA.label === 'peg') {
      pair.bodyA.sprite.tint = 0xff0000;
    } else if (pair.bodyB.label === 'peg') {
      pair.bodyB.sprite.tint = 0xff0000;
    }

    console.log(pair.bodyA.sprite.tint);
    console.log(pair.bodyB.sprite.tint);
  }

// 木偶人对战画面, 效率太低, 废弃;
let Matter = require('matter-js');
 var Engine = Matter.Engine,
     Render = Matter.Render,
     Runner = Matter.Runner,
     Body = Matter.Body,
     Constraint = Matter.Constraint,
     MouseConstraint = Matter.MouseConstraint,
     Mouse = Matter.Mouse,
     World = Matter.World,
     Bodies = Matter.Bodies,
     Composites = Matter.Composites,
     Composite = Matter.Composite,
     Events = Matter.Events;

Composites.Person = function(x, y, ){
  let group = Body.nextGroup(true),
      Person = Composite.create({ label: 'Person'}),
      radius = 2;
  
  var options = { 
    collisionFilter: { 
      group: group 
    },
    chamfer : {
      radius: 4
    }
  }

  let p = {

import * as Matter from 'matter-js'

// Matter.js module aliases
const consts = {
  Engine: Matter.Engine,
  World: Matter.World,
  Body: Matter.Body,
  Bodies: Matter.Bodies,
  Events: Matter.Events,
  Vector: Matter.Vector,
  Composite: Matter.Composite
}

export default consts

componentWillUnmount() {
    Matter.Events.off(this.context.engine, "afterUpdate", this.update);

    Input.key.off("down");
    Input.key.off("up");
  }

this.tickStart = function () {
            var event = {
                timestamp: engine.timing.timestamp
            };

            Matter.Events.on(engine, "beforeRender",  event);
            Matter.Events.on(engine, "beforeTick",  event);
            Matter.Events.on(engine, "tick",  event);

            Matter.Engine.update(engine, 1000/60);

            Matter.Events.on(engine, "afterTick",  event);
            Matter.Events.on(engine, "afterRender",  event);
        };

value: function registerUpdateListener(engine) {
      var _this2 = this;

      _matterJs.Events.on(engine, 'afterUpdate', function () {
        _this2.sprite.position.x = _this2.body.position.x;
        _this2.sprite.position.y = _this2.body.position.y;
        _this2.sprite.rotation = _this2.body.angle;
        _this2.x = _this2.body.position.x;
        _this2.y = _this2.body.position.y;
      });
    }
  }, {

* A tool for modifying the properties of an engine and renderer.
 * @module Gui
 */

var Gui = module.exports = {};

const dat = require('../../node_modules/dat.gui/build/dat.gui.min');
const ToolsCommon = require('./Common');
const Serializer = require('matter-tools').Serializer;
const Matter = require('matter-js');
const Engine = Matter.Engine;
const Detector = Matter.Detector;
const Grid = Matter.Grid;
const World = Matter.World;
const Bodies = Matter.Bodies;
const Events = Matter.Events;
const Composite = Matter.Composite;

/**
 * Creates a Gui
 * @function Gui.create
 * @param {engine} [engine]
 * @param {runner} [runner]
 * @param {render} [render]
 * @return {gui} The created gui instance
 */
Gui.create = function(engine, runner, render) {
  dat.GUI.TEXT_CLOSED = '▲';
  dat.GUI.TEXT_OPEN = '▼';

  var datGui = new dat.GUI({ autoPlace: false });

* A tool for inspecting worlds.
 * @module Inspector
 */

const Inspector = module.exports = {};
const $ = require('jquery');
require('../../node_modules/jstree/dist/jstree.min');
const ToolsCommon = require('./Common');
const Serializer = require('matter-tools').Serializer;
const km = require('keymaster');
const Matter = require('matter-js');
const Body = Matter.Body;
const Bounds = Matter.Bounds;
const Composite = Matter.Composite;
const Common = Matter.Common;
const Events = Matter.Events;
const Mouse = Matter.Mouse;
const Query = Matter.Query;
const Vertices = Matter.Vertices;
const Vector = Matter.Vector;
const MouseConstraint = Matter.MouseConstraint;

var $body;

/**
 * Creates an inspector
 * @function Gui.create
 * @param {engine} engine
 * @param {render} [render]
 * @param {object} options
 * @return {inspector} The created inspector instance.
 */

componentWillUnmount() {
    Matter.Events.off(this.context.engine, "afterUpdate", this.update);

    Input.key.off("down");
    Input.key.off("up");
  }

this.tickStart = function () {
            var event = {
                timestamp: engine.timing.timestamp
            };

            Matter.Events.on(engine, "beforeRender",  event);
            Matter.Events.on(engine, "beforeTick",  event);
            Matter.Events.on(engine, "tick",  event);

            Matter.Engine.update(engine, 1000/60);

            Matter.Events.on(engine, "afterTick",  event);
            Matter.Events.on(engine, "afterRender",  event);
        };