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!