Change port colors when mousehover on node

GoJS
1 
$(go.Panel, "Horizontal",
          new go.Binding("itemArray", "bottomArray"),
          {
            alignment: go.Spot.BottomCenter,
            alignmentFocus:  go.Spot.BottomCenter,
            //  row: 2, column: 1,
            itemTemplate:
              $(go.Panel,
                {
                  _side: "bottom",
                  fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom,
                  fromLinkable: true, toLinkable: true, cursor: "pointer",
                },
                new go.Binding("portId", "portId"),
                $(go.Shape, "Circle",
                  {
                    stroke: null, strokeWidth: 2,
                    desiredSize: new go.Size(7, 7),
                    fill: null,
                    margin: new go.Margin(0, 0, -3, 0),
                  })
              )
          }),
          { // handle mouse enter/leave events to show/hide the ports
            mouseEnter: ((e, node) => { showSmallPorts(e, node, true) }),
            mouseLeave: ((e, node) =>  { showSmallPorts(e, node, false)})
          } // end itemTemplate
      );  // end Node

 var  showSmallPorts = ((e,node,show) => {
      node.ports.each((port) => {
        if (port.portId !== "") {  // don't change the default port, which is the big shape
          port.fill = show ? "rgba(0,0,0,.3)" : null;
        }
      });
    })

how to change the fill color in itemTemplete when mouseover

2

What does showSmallPorts do? I would expect it would be setting the Shape.fill of the ports.

3 
 var  showSmallPorts = ((e,node,show) => {
      node.ports.each((port) => {
        if (port.portId !== "") {  // don't change the default port, which is the big shape
          port.fill = show ? "rgba(0,0,0,.3)" : null;
        }
      });
    })

but this is not working

4

You have declared the item template, a Panel, to be the port, due to the binding of GraphObject.portId.

But setting the “fill” property on a Panel doesn’t make sense. You need to set the Shape.fill property on the Shape, not on the Panel. You can either move the “portId” binding and all of the port-related properties to be on the Shape, or you can add “.elt(0)” to your existing code: port.elt(0).fill = ....

Aren’t you using the go-debug.js library during your development? It is more likely to provide helpful warnings and error messages.

5

how to use go-debug.js in angular-typescript? currently i’m using

import * as go from 'gojs';
import { DataSyncService, DiagramComponent, PaletteComponent } from 'gojs-angular';
6

You could either temporarily replace the go.js file or change all of the imports to refer to the file go-debug.js.