Change preserve aspectRatio Dynamically

[myspoonistoobig]

I'm dynamically creating resizable, draggable divs and making them interactable. They have unique random IDs at the time they are created. If I create an interactable with preserve aspectRatio set to disabled, I can't seem to enable it later based on the state of another UI element, keyboard press, etc.

Here's a snippet of how I'm setting up the interactable:

interact('.resizable')
    .resizable({
        edges: { top: true, left: true, bottom: true, right: true },
        modifiers: [
            interact.modifiers.aspectRatio({
                ratio: 'preserve',
                enabled: false
            }),
            interact.modifiers.restrictEdges({
                outer: 'parent',
            }),
        ], ...

Expected behavior

I have tried to change this property many different ways at this point. Most recently, I saw an old issue from about five years ago at https://github.com/taye/interact.js/issues/330 that suggests the following:

interactable.resizable({ preserveAspectRatio: bool });

So as an example if I

const myElement = interact(document.querySelector('#auniqueid'));

myElement.resizable({ preserveAspectRatio: true });

Nothing happens.

I have also tried things like

const myElement = interact(document.querySelector('#auniqueid'));

myElement.resizable({ modifiers: [interact.modifiers.aspectRatio({ ratio: 'preserve', enabled: true }) ] });

Again, nothing happens. No errors in the console either.

What am I missing?

System configuration

interact.js version: 1.10.11 Browser name and version: Firefox 92.0 Operating System: MacOS 10.14.6

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[taye]

If you keep a reference to the modifier object, you can call modifier.disable() and modifier.enable(). The enable(); disable() methods aren't documented because I'm still experimenting with them, but they'll probably stay.

const preserveRatio = interact.modifiers.aspectRatio({ ratio: 'preserve', enabled: true })
target.resizable({ modifiers: [preserveRatio] })
///...

preserveRatio.disable()

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[flagsoft]

If you keep a reference to the modifier object, you can call modifier.disable() and modifier.enable(). The enable(); disable() methods aren't documented because I'm still experimenting with them, but they'll probably stay.

const preserveRatio = interact.modifiers.aspectRatio({ ratio: 'preserve', enabled: true })
target.resizable({ modifiers: [preserveRatio] })
///...

preserveRatio.disable()

This does not work as expected. (Or wrong implementation, see code below)

When move around object at non-edges, it also resizes the whole object, which is wrong. But this should not be the case as it is the default with no aspectRatio modifiers.

var myPreserveRatio = interact.modifiers.aspectRatio({ ratio: 'preserve', enabled: false })

var myInteract = interact('.grid_snap')

listeners: {
                    move (event) {
                        var target = event.target

          // I want to add here: When SHIFT-key pressed, set modifier as aspectRatio enabled.
          if ( SHIFT key pressed) {
               myPreserveRatio.enable()
          } else {
               myPreserveRatio.disable()
         }

modifiers: [
                    // minimum size, status:works
                    interact.modifiers.restrictSize({
                        min: { width: 10, height: 10 }
                    }),

                    myPreserveRatio
],

[whoknowsfrfr]

Has this been fixed yet? It would come in clutch right around now