Mouse constraint without renderer

[dylancarlone]

I'm having trouble using the mouse constraint without a renderer. I am updating DOM elements with the positions of bodies in the world. Unless I overlay an element with 0 opacity, clicking and dragging has no effect. Is there a way to get around this? The overlay works but I'm looking for a cleaner way. Do I need to create my own DOM renderer?

[liabru]

Try this:

var mouseConstraint = MouseConstraint.create(engine, {
    mouse: Mouse.create(element)
});

Where element is the container that's bounding your render area.

[dylancarlone]

Doesn't seem to be working. I have a div for each point in a softbody that I am updating in the afterUpdate event. They are inside a container div. Passing an null/empty render element to Engine.create() and passing either document.body or the container div to the mouse option in MouseConstraint.create() doesn't have any effect.

[dylancarlone]

Referring to #77,

Is that to say that passing a custom Mouse to MouseConstraint.create() isn't the right way to go, and that I need to create a custom renderer?

Thanks!

[liabru]

Can you provide a jsfiddle example so I can see your use case?

[dylancarlone]

Sorry for the delay - https://jsfiddle.net/5nqsL3a7/2/

Still unsure what I'm missing. Thank you so much for your help!

[liabru]

I think these two lines in Matter.Mouse may have something to do with it. I think a fix is to use element.clientWidth and element.clientHeight.

[zeezali]

@liabru - Just an FYI, I was having the same issue where the MouseConstraint wouldn't work without a renderer. In my case I was creating the Engine and Render (for debugging) separately and then adding the MouseConstraint to the engine.

The MouseConstraint wasn't working properly or firing an events at all. I came across the following in MouseConstraint.js:

Events.on(engine, 'tick', function() {
    var allBodies = Composite.allBodies(engine.world);
    MouseConstraint.update(mouseConstraint, allBodies);
    _triggerEvents(mouseConstraint);
});

In my case I had to manually fire the tick event on the Engine for the MouseConstraint to work like it does in your demos.

Events.trigger(engine, 'tick')

Hope that's useful info.

[liabru]

Hey, looks like you found a bug. There is no tick event on engine any more, so it looks like this needs to be updated. Thanks!

[lafkpages]

So has this been fixed yet? I'm also trying to use mouse control without a renderer by passing my container div to the Mouse but it won't work

// mouse control
let mouse = Matter.Mouse.create(DEBUG_RENDER? render.canvas : container);
let mouseConstraint = Matter.MouseConstraint.create(engine, {
  mouse,
  constraint: {
    stiffness: 0.2,
    render: {
      visible: false
    }
  }
});
Matter.Composite.add(engine.world, mouseConstraint);

It gives this error:

[liabru]

@lafkpages can you try using the full build (rather than minified) and share the error stack trace? Also which specific line in your code above leads to that error?

[lafkpages]

Sorry, I just figured out it was a bug on my side 😅
The mouse does work now without the renderer. Thanks!