Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mouse constraint without renderer #73

Closed
dylancarlone opened this issue Mar 25, 2015 · 8 comments
Closed

Mouse constraint without renderer #73

dylancarlone opened this issue Mar 25, 2015 · 8 comments
Labels

Comments

@dylancarlone
Copy link

@dylancarlone dylancarlone commented Mar 25, 2015

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
Copy link
Owner

@liabru liabru commented Mar 26, 2015

Try this:

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

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

Loading

@dylancarlone
Copy link
Author

@dylancarlone dylancarlone commented Mar 27, 2015

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.

Loading

@dylancarlone
Copy link
Author

@dylancarlone dylancarlone commented Apr 16, 2015

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!

Loading

@liabru
Copy link
Owner

@liabru liabru commented Apr 18, 2015

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

Loading

@dylancarlone
Copy link
Author

@dylancarlone dylancarlone commented May 7, 2015

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

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

Loading

@liabru
Copy link
Owner

@liabru liabru commented Jun 20, 2016

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.

Loading

@liabru liabru self-assigned this Jun 20, 2016
@liabru liabru removed their assignment Jun 25, 2016
@liabru liabru closed this in 1340159 Jun 25, 2016
@zeezali
Copy link

@zeezali zeezali commented Jul 29, 2016

@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.

Loading

@liabru
Copy link
Owner

@liabru liabru commented Jul 29, 2016

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!

Loading

@liabru liabru reopened this Jul 29, 2016
@liabru liabru closed this in ffb128c Jan 15, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants