1

I have this "drop menu" that literally drops from the top using the Matter.js 2d physics engine: https://github.com/NeilSentence/galerie-sens

let world, engine, runner

const { Engine, Runner, World, Bodies, MouseConstraint, Composites, Body } = Matter

class Scene extends React.Component {
    
    componentDidMount(){
        const runCode = () => {
            // set up all matter.js stuff here (works!).
            // At the bottom, an IIFE called update:
        
            (function update(){
                requestAnimationFrame(update)
                // updates CSS positions of DOM elements. works(!)
                Engine.update(engine)
            })()
        }
        run()
    }
    componentWillUnmount(){
        // cancel matter stuff here:
        World.clear(world);
        Engine.clear(engine);
        Runner.stop(runner);
    }  
}

Problem is, when I toggle the menu (close than open again), things fall down faster!

This is after I tried to fix a bug where Bodies remained active after re-mount. Found this answer How to completely stop/reset/reinitialize Matter.js canvas/world/engine/instance where Mr. Greenstreet outlines his reset setup.

However, in my case it's only working until the point where he explains the need for stopping the Runner. Stopping it makes no difference.

BTW, I'm not using Render, as I only use the engine to produce values for my HTML-elements.

I'm using React - the Scene is a class component (I'm just getting started with react).

Full project is under src/components/menudrop.js

Neil S3ntence
  • 198
  • 2
  • 19
  • Code should be in the question itself as a [mcve]. You can create a [runnable snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) to help illustrate your issues, but it's best to ask only a single question at a time. Thanks. – ggorlen Dec 17 '20 at 14:16
  • Thx, will do. I'm new to React so I'm not sure how to setup a runnable snippet tho. – Neil S3ntence Dec 17 '20 at 19:17
  • Did you read the links above? They show you how. If that's not concrete enough for MJS, please see [my previous answers](https://stackoverflow.com/search?q=user%3A6243352+%5Bmatter.js%5D) for this tag, which almost exclusively use runnable snippets (except when Node is involved). Making it runnable is less important than the MCVE aspect, though. The critical point is avoiding the "here's some random link with a dump of all my code" which suffers from link rot and makes it harder to help because I need to poke around in random files in your repo or clone it and set up an environment. Thanks. – ggorlen Dec 17 '20 at 19:20
  • Yes I'm checking them right now. It seems that StackOverflow's inline runnable snippet editor only goes up to React 16.6... I'm on 16.10 – Neil S3ntence Dec 17 '20 at 19:23
  • 1
    The editor can include any version of any package, pretty much. [Here's](https://stackoverflow.com/a/60288933/6243352) one of my answers using 16.10 as a runnable snippet. But again, I wouldn't sweat the runnable--that's just icing on the cake. A plain old block of code that shows me the problem clearly is better than a link to a repo with who-knows-what in it. I can copy it into a snippet or my local environment easier so I can run and reproduce the problem. The link I just shared has a clear question with a direct MCVE even though it's not runnable. – ggorlen Dec 17 '20 at 19:28
  • 1
    https://stackoverflow.com/questions/64371523/matter-js-how-to-get-the-dimension-of-an-image-to-set-bodies-sizes/64435799#64435799 This is helpful for my (already quick fixed) elem not ready during sizing problem. I can improve my solution later on & learn a bit about async, Thanks! – Neil S3ntence Dec 17 '20 at 20:04
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226111/discussion-between-nils-sens-and-ggorlen). – Neil S3ntence Dec 17 '20 at 20:05

0 Answers0