interact.js icon indicating copy to clipboard operation
interact.js copied to clipboard

Change aspecRatio programmatically. Does not work as expected.

Open flagsoft opened this issue 2 years ago • 0 comments

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
],

flagsoft avatar May 30 '23 19:05 flagsoft