Both Resizeable and Scaleable anchors

[pclancysc]

Environments

• Framework name: ngx-moveable 0.29.0
• Framework version:
• Moveable Component version:
• Testable Address(optional):

Description

I'd like to set anchors like so:

NW, NE, SE, SW = scale E, W = resize N, S = hidden

What I've tried...

 {
      keepRatio: true,
      renderDirections: ['nw', 'ne', 'se', 'sw'], 
       resizable: {
          resizable: true,
         renderDirections: ['e', 'w'],
       },
      draggable: true,
      edgeDraggable: true,
      rotatable: true,
      scalable: true,
   };

Ideal config would be...

{
      keepRatio: true,
      resizable: {
        edge: ['e', 'w'],
        renderDirections: ['e', 'w'],
      },
      scaleable: {
        edge: [],
        renderDirections: ['nw', 'ne', 'se', 'sw'], 
      }
      draggable: {
        edge: ['n', 's'],
        renderDirections: ['n', 's'],
      }

      
    };

I'm getting the feeling that these config isn't supported? Is that right?

[daybrush]

@pclancysc

okay. I'll add this feature in scalable.

[daybrush]

@pclancysc

• lit-moveable 0.10.0
• moveable 0.33.0
• preact-moveable 0.35.0
• react-compat-moveable 0.21.0
• react-moveable 0.36.0
• svelte-moveable 0.25.0
• vue-moveable 2.0.0-beta.27
• vue3-moveable 0.8.0
• ngx-moveable 0.30.0

moveable's new version is released.

See https://daybrush.com/moveable/storybook2/?path=/story/advanced-resizable--using-edges-and-controls-with-draggable-resizable-and-scalable

triggerAblesSimultaneously={true}
            resizable={{
                edge: ["e", "w"],
                renderDirections: ["e", "w"],
            }}
            scalable={{
                edge: [],
                renderDirections: ["nw", "ne", "se", "sw"],
            }}
            draggable={true}
            edgeDraggable={["n", "s"]}