Matter-js: I do not want the mouse drag function to function

[machida-yosuke]

I am not very good at English, so I apologize in advance.
I am testing physical operations using matter.js.
Add squared Bodies to the world and click on it to see the label of the Bodies and to log it.

As I want to do,
・Do not use drag function
・Can use scrolling function

module() {
    const Engine = Matter.Engine;
    const Render = Matter.Render;
    const Runner = Matter.Runner;
    const Body = Matter.Body;
    const World = Matter.World;
    const Bodies = Matter.Bodies;
    const Common = Matter.Common;
    const Events = Matter.Events;
    const Mouse = Matter.Mouse;
    const MouseConstraint = Matter.MouseConstraint;
    const engine = Engine.create();
    const world = engine.world;
    const runner = Runner.create();
    const render = Render.create({
      element: this.element,
      canvas: this.view,
      engine: engine,
      options: {
        width: this.canvasWidth,
        height: this.canvasHeight,
        pixelRation: 1,
        background: '#000000',
        hasBouse: false,
        wireframes: true
      }
    });

    Render.run(render);
    Runner.run(runner, engine);
    engine.world.gravity.y = 2; //重力を0に設定 デフォルトは1

    //落ちてくる要素
    const rect = Bodies.rectangle(this.canvasWidth / 2, 200, 200, 200, {
      chamfer: {
        radius: 5 //角丸
      },
      density: 5,
      frictionAir: 0.001, //空気抵抗
      restitution: 0.3, //    弾力性
      friction: 8, // 摩擦
      label: 'test',
      angle: Math.random() * 10,
    });
    World.add(world, rect);

    var startdrag = MouseConstraint.create(engine, {
      element: this.element, 
    });
    World.add(world, startdrag);


    Events.on(startdrag, "startdrag", (e) => {
      console.log(e);
      if(e.body.label == "test") {
        console.log('test');
      }
    });

    //壁
    const wall = [
      Bodies.rectangle(this.canvasWidth / 2, -25, this.canvasWidth, 50, {isStatic: true}),
      Bodies.rectangle(this.canvasWidth / 2, this.canvasHeight + 25, this.canvasWidth, 50, {isStatic: true}),
      Bodies.rectangle(-25, this.canvasHeight / 2, 50, this.canvasHeight, {isStatic: true}),
      Bodies.rectangle(this.canvasWidth + 25, this.canvasHeight / 2, 50, this.canvasHeight, {isStatic: true})
    ];
    World.add(world, wall);

    Render.lookAt(render, {
      min: {
        x: 0,
        y: 0
      },
      max: {
        x: this.canvasWidth,
        y: this.canvasHeight
      }
    });

    return {
      engine: engine,
      runner: runner,
      render: render,
      canvas: this.view,
      stop: function() {
        Matter.Render.stop(render);
        Matter.Runner.stop(runner);
      }
    }
  }
};

[liabru]

Don't use Matter.MouseConstraint, instead inside of a click event, you can use Query.point(Composite.allBodies(world), mouse.position) where mouse is a Matter.Mouse.

[machida-yosuke]

Thank you for your kind instruction!!

const mouse = Mouse.create(this.element);
    this.element.addEventListener('click', () => {
      const query = Query.point(Composite.allBodies(world), mouse.position)
      console.log(mouse.position);
      console.log(query);
    });