interact.js
interact.js copied to clipboard
Change aspecRatio programmatically. Does not work as expected.
If you keep a reference to the modifier object, you can call
modifier.disable()andmodifier.enable(). Theenable(); 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
],