Expand/Collapse text box from node

GoJS
1

Hi,

I have a node on the canvas for which I can assign certain configuration. Once I set the configuration for my node, I should be able to display the config in a text box below the node. This text box should be expandable/collapsible.

Please see this image for reference:
proptext

I need to toggle expand/collapse on click of the chevron icon on the node.

Is this possible to do? Could you please provide a sample?

2

Yes. Implement the details panel as you like, give it a name, and add a “PanelExpanderButton” in the main panel that controls the new panel’s visibility. Examples are in IVR Tree and Entity Relationship.

3

I made use of the panel expander buttons, and functionally they are working fine. But the button is showing up as a tiny black triangle. I want to be able to give my custom icon in place of this. How can i do that? while retaining the rotating functionality of the icon as well?

4

You can see how the “PanelExpanderButton” is defined at https://gojs.net/latest/extensions/buttons.js

Set the button’s _buttonExpandedFigure and/or _buttonCollapsedFigure to the geometry path strings that you want. GoJS Geometry Path Strings -- Northwoods Software

5

Did the same thing, but still doesn’t seem to work.

This is how my panel expander button is defined:

$("PanelExpanderButton", "PROPTEXT",
                        {
                            row: 1, column: 2,
                            '_buttonExpandedFigure': 'M24.642,13.874l-1.768-1.768L16,18.981,9.124,12.106,7.357,13.874,16,22.517Zm0,0',
                            '_buttonCollapsedFigure': 'M126.581,9329.985l7.812-7.619,7.7,7.619'
                        },
                    ),

But i still see the small triangle. What might be the issue here?

6

Update: It worked. Im able to put a custom icon. But Im still able to see the small triangle in the background.

Please see the below image for reference:
panelexpanderbutton

How do i remove that?

Also. clicking on the expander button is triggering a click on the entire component. This is not desirable. I tried to prevent it by using:

click: (e, node) => {
                                e.handled = true;
                            }

But the expansion itself will be prevented due to this. How do i resolve this ?

7

I think not setting e.handled = true is a bug in our click event handler. Thanks for pointing it out – we will fix this in our next release. In the meantime you can copy the click handler from the extensions/buttons.js file and add that line just before it starts a transaction.

I will look into the persistent triangle later today.

8

I am unable to reproduce any problem with the button figure. For example:

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        { click: function(e, node) { alert("clicked " + node.key); }},
        $(go.Panel, "Auto",
          $(go.Shape,
            { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: 8, editable: true },
            new go.Binding("text").makeTwoWay()),
        ),
        $("PanelExpanderButton",
          {
            _buttonExpandedFigure: "M0 0 L10 0",
            _buttonCollapsedFigure: "M0 5 L10 5 M5 0 L5 10",
          }),
        $(go.TextBlock, "EXTRA", { name: "COLLAPSIBLE" })
      );

image

I also used this node template to test that fixing the “PanelExpanderButton”'s click event handler to set e.handled = true does in fact work, so that clicking the button does not also show an alert. This fix has been checked in and will be available in 2.0.18.