Adding custom functions around moveable element

[webAravis]

Environments

• Framework name: Angular
• Framework version: 10
• Moveable Component version: 0.15.4
• Testable Address(optional):

Description

Hello and thanks for this great package. Is there a way to add custom functions with their own markup, css and behavior like a custom delete icon on this post #246 ?

[daybrush]

@webAravis However, custom props cannot be used in angular, and css should be set to global. or use inline css.

customAble = {
   name: "customAble",
   always: true,
   props: {},
   events: {},
   render(moveable, React) {
    return React.createElement(...);
   },
};

[ables]="[customAble]"

[daybrush]

@webAravis I wrote a bit of documentation. https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/react-moveable/ables/README.md

[webAravis]

Thank you, I'll try it and tell you!

[negue]

Does it mean you need React renderer inside Angular to add custom ables to your moveables ?

[daybrush]

@negue

Yes. However, it does not import react. Use React as the second argument.

customAble = {
   name: "customAble",
   always: true,
   props: {},
   events: {},
   render(moveable, React) {
    return React.createElement(...);
   },
};

[iprasadg]

@daybrush @webAravis How to use [ables] in Angular? If you have a example in angular please share, it will be great help.

Thanks in advance

[faustort]

If you can please share examples of using Custom Able with vanilla would be great =)

[born2net]

any updates on this, posted here too: https://github.com/daybrush/moveable/issues/1007