Onmouseover on textblock not working

Hi,
I’m trying to start a link from a panel title but when the mouse is over the textblock the event is not fired. In few words…Is possible to put the textblock in a different layer than the shape with ports, leaving the text visible? Or making the panel start linking when then mouse is clicking over textblock ?
Here’s my code:

        myDiagram.nodeTemplateMap.add("Drivers",
          $(go.Node, "Auto",
            {
            	isTreeExpanded: true,
                minLocation: new go.Point(NaN, NaN),  // not allow movement
                maxLocation: new go.Point(NaN, NaN),
                deletable: false
                
    		},
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            // this rectangular shape surrounds the content of the node
 			{ 
    			contextMenu: myContextMenu
 			},
            $(go.Shape,
              { fill: "#EEEEEE" }),
            // the content consists of a header and a list of items
            $(go.Panel, "Vertical",
              // this is the header for the whole node
              $(go.Panel, "Auto",
                { stretch: go.GraphObject.Horizontal },  // as wide as the whole node
                $(go.Shape,
              	{ 
                  	fill: "#AF5555", 
                  	stroke: null, 
                  	minSize: new go.Size(150, 10),
        		  	portId: "totale",
        		    background: "transparent",
         		 // allows links to/from all sides
        		    fromSpot: go.Spot.Right,
        		    toSpot: go.Spot.Left,
        		 // allows drawing links from or to this port
        		    fromLinkable: true,
        		    toLinkable: true,
        		    cursor:"pointer",
    	            mouseEnter: function(e, port) {  // the PORT argument will be this Shape
    	                if (!e.diagram.isReadOnly) port.fill = "#FF0000";
    	            },
    	            mouseLeave: function(e, port) {
    	                port.fill = "#AF5555";
    	            }    		   
    	         }        		    
    		   ),
   			    $(go.Picture, 
      			  { source: imgpth+"enter_class.png",
      				column: 0,
      				background: "transparent", 
      				width: 20, 
      				height: 20,
      				alignment: go.Spot.TopLeft
      			  }),        			    
                $(go.TextBlock,
                  {
                    alignment: go.Spot.Center,
                	column: 1, 
                    margin: new go.Margin(3, 5, 3, 10),
                    stroke: "white",
                    textAlign: "center",
                    font: "bold 10pt sans-serif"
                  },
                  new go.Binding("text", "cname")                  
                ),
                $("PanelExpanderButton", "TABLE",  
   			      { 
                	column: 2, 
   			        alignment: go.Spot.TopRight 
   			      })
              ),
              /*
              { // handle mouse enter/leave events to show/hide the ports
                mouseEnter: function(e: go.InputEvent, node: go.GraphObject) { showSmallPorts(node: go.GraphObject, true); },
                mouseLeave: function(e: go.InputEvent, node: go.GraphObject) { showSmallPorts(node: go.GraphObject, false); }
              },
              */
              // this Panel holds a Panel for each item object in the itemArray;
              // each item Panel is defined by the itemTemplate to be a TableRow in this Table
             $(go.Panel, "Table",
                {
                  name: "TABLE",
                  padding: 2,
                  minSize: new go.Size(140, 10),
                  defaultStretch: go.GraphObject.Horizontal,
                  itemTemplate: fieldTemplate,
                  visible: false,
       		      cursor:"pointer"

                },
                new go.Binding("itemArray", "fields")
              ) // end Table Panel of items
            )  // end Vertical Panel
          ));  // end Node
>>> 
here's the image:
![immagine|690x288](upload://cQl2cLXKBtTGU017FLpVSS38aEe.png) 

Thx

It seems to me that the comments out mouseEnter and mouseLeave event handlers are declared on the whole “Vertical” Panel, not on anything more specific. Is that what you wanted? Would you want to put the event handlers on the header Panel or on the specific TextBlock?

And the port there is just the Shape, not the Panel holding the header contents nor the TextBlock.

Hi Walter,
yes, I want to put the event handler on the header panel and to be more specific I want the textblock having the same behavior of the header panel…Just to be clear I want is to start dragging link when I click on the text of the header panel and not only when I click on the margin of the panel… I put an example: when mouse is on the textblock cursor is normal and event is not fired


when the mouse is near the border or just out the text it starts event :

Is quite like the text is “stopping” the start of the dragging.

OK, so you don’t actually want a mouseEnter event handler – that was just for experimentation.

So I think you can get the behavior that you want by moving the portId and all of the from… and to… port-related settings (and bindings, if any) from the Shape up to its Panel.

If you then decide that you don’t want the user to be able to start drawing a new link from everywhere in that panel, you can set fromLinkable and toLinkable to false on those objects for which the user will be able to select and drag the node. (Assuming the node is movable or copyable or whatever.)

ehm…I guess if I move portId from shape to the upper panel I’ll see the link starting from the middle of the node…I show you the opened node:


as you see there are other elements in a underlying table that can be linked to other nodes. What I need is to link the title bar too, from right outcoming and left incoming, (just to be clear the bar with the title “Impianti Piazzola”), that now is linkable in these two ways but only if you start drag from the near border of the title, that is the textblock. I tried also with the onmouseover just to show where the ports are, but the border is very very small…

If that isn’t what you want, set those properties on what you do want – the “Auto” Panel is the header, isn’t it? Isn’t that the title bar with “Impianti Piazzola”?

Yes that’s it. That node is a part of a group node (“DR244”) that I don’t want to link. The panel is an “Auto” panel as you’ve just said. So as far as I can understand you suggest to move portid and other stuff related to ports from shape to upper panel disabling fromLinkable and toLinkable from underlying objects like shape and textblock…sorry for resuming but I want to be sure to have understood doh! :-)
I’ll take a try…

Great!
Thank you Walter, it works like a charm!

Ciao
Fulvio