Cannot dynamically resize the moveable

[csterritt]

Hi - I have a codesandbox demo here of the problem I'm seeing.

I want to be able to move the box you see on screen by dragging the "Move" in the top-left, and that works fine.

I want to be able to "close" the box, by which I mean just reduce it to the banner at the top with the "Move" and "Close" controls. This almost works... the problem is that, although the height for the containing "div" (which is, I believe, the Moveable) changes, the blue edge rectangle stays the same size, so although the content goes away, the bounding box remains.

I've tried a lot of things such as trying to trigger "resize" events, etc., but gotten nowhere.

Thanks!

[csterritt]

Update: Found a fix by trying to make a vanilla-moveable example.

First, I set up a ref on the Moveable instance named "theMoveable".

Then, in the toggleOpenClose method, I added:

    setTimeout(() => {
        this.$refs.theMoveable.updateRect()
    }, 1)

To force the update. If I don't put it in a setTimeout call, the change (either the CSS change or the updateRect) comes too late, and the display is wrong.

Is this the right way to do it?

My apologies, by the way, for not thanking you first for making vue-movable! It's fantastic, really nice way to get the behavior I wanted very quickly and easily.