Change the color of an element and all child elements via the context menu

GoJS
1

I want that when clicking on a button from the context menu, the node and all child nodes change their color to the specified one. I have a function to change color as well as a function to remove all children with a method node.findTreeParts(). But can’t put them together to work. Part of my code:

myDiagram.nodeTemplate.contextMenu =

                $("ContextMenu",

                $("ContextMenuButton",

                    $(go.TextBlock, "Удалить ветвь"),

                    {

                    click: function(e, obj) {

                        var node = obj.part.adornedPart;

                        if (node !== null) {

                        myDiagram.startTransaction("remove dept");

                        myDiagram.removeParts(node.findTreeParts());

                        myDiagram.commitTransaction("remove dept");

                        }

                    }

                    }

                ),

                $("ContextMenuButton",

                    $(go.TextBlock, "Перекрасить ветвь"),

                    {

                        click: function(e, obj) {

                        var node = obj.part.adornedPart;

                        if (node !== null) {

                        myDiagram.startTransaction("remove dept");

                        var color = graygrad;

                        var diagram = myDiagram;

                        var parts = node.findTreeParts();

                        $.each(parts, function()

                        {

                            changeColor(diagram, color);

                        });

                        myDiagram.commitTransaction("remove dept");

                        }

                    }               

                    }

                ),

                $("ContextMenuButton",

                    $(go.TextBlock, "Сменить цвет (Фиолетовый)"),

                    {

                    click: function(e, obj) {

                        var node = obj.part.adornedPart;

                        if (node !== null) {

                        myDiagram.startTransaction("remove dept");

                        var color = graygrad;

                        var diagram = myDiagram;

                        changeColor(diagram, color);

                        myDiagram.commitTransaction("remove dept");

                        }

                    }

                    }

                ),

function changeColor(diagram, color) {

                diagram.startTransaction("change color");

                diagram.selection.each(function(node) {

                    if(node instanceof go.Node) {

                        var data = node.data;

                        diagram.model.setDataProperty(data, "color", color);

                    }

                });

                diagram.commitTransaction("change color");

            }
2

I’ll assume that your node template has one or more Bindings that use “color” as the data source property.

So your context menu button click event handler could be something like:

click: (e, button) => {
    const node = button.part.adornedPart;
    if (!node) return;
    e.diagram.model.commit(m => {
        node.findTreeParts().each(n => m.set(n.data, "color", graygrad);
    });
}

This assumes that graygrad is a CSS color string, or that it is some value that Bindings can convert into either a CSS color or a Brush.

1 Like
3

Yes, that’s right, thank you very much!