Is there any way to add a delete button at the top of the node?
Something similar in style to delete applications on ios.

Are you still unable to create an actual button component in a composite node.  This post is 7 years old and I have not seen any other postings regarding this.


I have WinForms application using mindfusion and it has composite nodes using button components, I am trying to replicated that on the web using MVC version but modifying the Tutorial8 Sample code to have a ""Component"": ""Button"" seems to not be valid in MVC version is this true?  Do I really need to draw an image, create bounds, and check for mouse pointer within those bounds when a click even occurs? Like in the OrgChart Sample?  If so, when should/would I use the json  string template used in Tutorial8 vs the JS method used in OrgChart?

Thank you!

Attached script implements simple button components, with image, imageAlign and text properties so far (unlike Windows Forms where you can place other components as buttons' contents).

@{
    string template = @"{
""component"": ""GridPanel"",
""rowDefinitions"": [""6"", ""*""],
""columnDefinitions"": [""6"", ""*""],
""children"":
[
{
""component"": ""Shape"",
""id"" : ""RoundRect"",
""columnSpan"": 2,
""rowSpan"": 2,
""margin"": ""2"",
""brush"": ""skyblue"",
""pen"": ""skyblue""
},
{
""component"": ""Text"",
""columnSpan"": 2,
""rowSpan"": 2,
""margin"": ""3,5,3,1"",
""text"": ""some node contents""
},
{
""component"": ""ButtonComponent"",
""gridColumn"": 0,
""gridRow"": 0,
""brush"": ""#ccc"",
""imageLocation"": ""../Content/close-all.png"",
""imageAlign"": ""Center"",
""cornerRadius"": 3.5,
""clickHandler"": ""onDeleteClick""
}
]
}
";

function onDeleteClick(sender, args)
{
    var item = args.getItem();
    item.getParent().deleteItem(item);
} 

Regards,
Slavcho

Have you replaced diagramming.js in your project with one attached above? Maybe also refresh the browser page to make sure not using cached copy.

For time being try something like this -

{
""component"": ""ButtonComponent"",
""brush"": ""#ccc"",
""imageLocation"": ""../Content/close-all.png"",
""imageAlign"": ""Center"",
""cornerRadius"": 3.5,
""fixedWidth"": 6,
""fixedHeight"": 6,
""clickHandler"": ""onDeleteClick""
}

...
<script type="text/javascript">
    MindFusion.Diagramming.ButtonComponent.prototype.measure = function ()
    {
        this.desiredWidth = this.fixedWidth;
        this.desiredHeight = this.fixedHeight;;

        this.textContent.measure(this.fixedWidth, this.fixedHeight);
    };
</script> 

We'll extend the button for official release with some min/max properties and auto-sizing depending on text / image.

Regards,
Slavcho