How to create custom adornment with the help of dynamic data from an API

GoJS
21

That binding, new go.Binding('stroke', '') means that you are trying to set the Shape.stroke property to the whole value of the item in the Panel.itemArray.

But in the example that I posted above, that Array holds the text strings to be shown. It seems unlikely that those text strings are CSS colors that are valid values for the Shape.stroke.

So I suggest that before you show the Adornment by adding it to the Node, that you modify the itemTemplate’s shape’s stroke to be the color that you want all of those rounded rectangles to be, rather than the “purple” it is hardcoded to be.

22

@walter I am taking the color code on hover of the node and setting into a variable(strokeColor) and I am assigning that variable to the adornment shape like this
GJS(go.Shape, 'RoundedRectangle', { fill: 'white',stroke:strokeColor}),

Its giving me an error for gojs
Cannot read property ‘type’ of undefined but when I do this typeof(strokeColor) its string.

23

So are you reconstructing the hover Adornment?

Could you show the stack trace and the actual value of strokeColor?

24

No I am not reconstructing the hover adornment, I have attached a function where stroke is binded using new Binding().

      GJS(go.Panel, 'Position',
        new go.Binding('itemArray', 'adornments'),
        new go.Binding('stroke' , 'stroke', function(s){strokeColor = s;return s;}),
        {
          name: 'ITEMS',
          alignment: go.Spot.Right,
          alignmentFocus: go.Spot.Left,
          itemTemplate:
            GJS(go.Panel, 'Position',

              // the pretend node for one of the "adornments"
              GJS(go.Panel, 'Spot',
                new go.Binding('position', 'itemIndex', computeBodyPosition).ofObject(),
                { 
                  // drawLink is defined below, to support interactively drawing new links
                  isActionable: true,
                  click: drawLink,  // click on Button and then click on target node
                  actionMove: drawLink  // drag from Button to the target node
                },

                GJS(go.Panel, 'Auto',
                  { width: 100,
                    height: itemHeight                    
                  },
                  GJS(go.Shape, 'RoundedRectangle', { fill: 'white',strokeColor}),
                  GJS(go.TextBlock, { font: '7pt sans-serif',
                                      textAlign: 'center', },
                      new go.Binding('text', ''))
                ),

                GJS(go.Shape, 'Circle',
                    { alignment: go.Spot.Left, width: 5, height: 5, fill: '#6f6f8d', stroke: '#6f6f8d', name: 'AD' })
              ),```
25

The Panel class does not have a stroke property, so any Binding whose target property is “stroke” doesn’t make sense there.

If you use the go-debug.js library, it will detect more problems and warn about them.

26

Even If I do the same for node It behaves the same. Okay, I will go through it. Thanks @walter

27

I had been suggesting that you modify the itemTemplate in the hover Adornment, by giving the Shape a name:

                    $(go.Shape, "RoundedRectangle",
                      { name: "SHAPE", fill: "white", stroke: "purple" }),

Then when you want to show the Adornment:

          mouseHover: function(e, obj) {
            var node = obj.part;

            var templ = theHoverAdornment.findObject("ITEMS").itemTemplate;
            templ.findObject("SHAPE").stroke = "fuchsia";

            theHoverAdornment.adornedObject = node;
            node.addAdornment("MouseHover", theHoverAdornment);
          }

Of course replace “fuchsia” with whatever color you wanted to show for that node.

1 Like
28

Thank You @walter It worked!