Moveable: Is there a way to add custom delete function?

[Eiputoo]

Environments

• Framework name: Next.js
• Framework version: 9.3.4
• Moveable Component version: ^0.17.6

Description

I'm creating a customize shirt app, user can upload the images and can delete on shirt , And i have to put the delete button on the moveable item. like the attached file.
So how can i add the delete action please?

[ctf0]

am building something similar, u can use moveable.destroy() & remove the img tag from the dom

[daybrush]

@ctf0
@Eiputoo
https://codesandbox.io/s/vigilant-antonelli-vpxb7?file=/src/App.js

you can make custom able.

[ctf0]

@daybrush do u have a vanilla example for it ?

[daybrush]

@ctf0

its need JSX.

const customAble = {
    render(moveable, React) {
         // return <div></div>;
       return React.createElement("div");
    },
};
moveable.ables = [customAble];
moveable.setState({
    tooltool: true,
});

[Eiputoo]

am building something similar, u can use moveable.destroy() & remove the img tag from the dom

@ctf0 , got it. Thank you for your reply!

@ctf0

https://codesandbox.io/s/vigilant-antonelli-vpxb7?file=/src/App.js

you can make custom able.

i added like you said, but i got this error. Anyway thank you for your reply.

[daybrush]

@Eiputoo

Uhmmm..

Try any:

// const customAble: any = { ... };

return <Moveable<any> ... />

[Eiputoo]

OK, will try it. Thank you very much @daybrush
Another thing is the moveable's inline style is not update after deleting the item from Array.
My process is like this, User will upload 2 images and i put that images to an Array with Moveable function.
And user will resizing and rotating that images, then if user delete first image from array, that first image's inline style css are replacing to the second image. Please check the attached. The first attach is before delete and the second one is after delete.

I already try using updateRect() and also updateTarget() but it's not working. How should i do please?

[Eiputoo]

am building something similar, u can use moveable.destroy() & remove the img tag from the dom

@ctf0 moveable.destory is not OK for multiple items. After remove one item, moveable doesn't work for the rest of the item. Whatever thanks for your reply.

[ctf0]

@Eiputoo i think ur issue is related to having the same moveable for multiple items, i would suggest creating a different instance for each image.

[Eiputoo]

@ctf0 i think so, will try it. Thank you!