taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
http://interactjs.io/
MIT License
12.19k stars 782 forks source link

Change aspecRatio programmatically. Does not work as expected. #1002

Open flagsoft opened 1 year ago

flagsoft commented 1 year ago

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