daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
9.94k stars 616 forks source link

custom delete button on angular access to component functions #876

Open brokolililer opened 1 year ago

brokolililer commented 1 year ago

Environments

Description

How can I access my functions within the "onClick" method in the editable button example at "https://daybrush.com/moveable/storybook/?path=/story/make-custom-able--custom-able-editable". I want to access functions inside Component. But I can't access my functions as "this" or "var self=this". I will add the custom delete button. My delete function is inside the angular component.

    name: "editable",
    props: {},
    events: {},
    render(moveable: MoveableManagerInterface < any, any > , React: Renderer) {
        const rect = moveable.getRect();
        const {
            pos2
        } = moveable.state;
        const EditableViewer = moveable.useCSS("div", "...");
        return React.createElement(EditableViewer, {
            key: "editable-viewer",
            className: "moveable-editable",
            style: {
                transform: "translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(10px)"
            }
        }, [
            "\n            ",
            React.createElement("button", {
                className: "custom-button",
                onClick: () => {
                    console.log(moveable)
                    this.deleteSelectedElements(); // ??? I cannot access
                }
            }, [
                "x"
            ]),
        ]);
    }
}as const;
brokolililer commented 1 year ago

Solved. This arrow method worked fine. Thank you daybrush team.

render: (….) => {…}