How to set the position of the button(top centre) on the hover of Link Label


#1

I have a delete button on Mouse Hover of a Link Label help me to set the position to top centre of the link Label, Right now it is coming on the top centre but is not fixed it moves when node is moved.


#2

Have you seen https://gojs.net/latest/samples/hoverButtons.html ?

Have you seen https://gojs.net/latest/intro/tools.html#LinkingToolAndRelinkingTool ? If you have any further questions, this really deserves its own forum topic.

I don’t know what you mean by overlapping labels. This really deserves its own forum topic.


#3

@walter Yes I have created different topics on the forum for the other two questions I asked.


#4

@walter I tried hard to set the position of the Link Label adornment. But I believe it setting the position with reference to the link and not the Link Label. Is there a way to set the position with the reference to the Link Label ?.


#5

It’s unclear what you mean. Could you please demonstrate what you want with a small screenshot and minimal code to reproduce the situation?


#6

I have added the screen shots as well as the code.
This is the code for making a link and Link Label.

createLinkTemplate() {
    diagram.linkTemplate = GJS(go.Link, { selectable:false,
                                          routing: go.Link.Orthogonal, 
                                          layerName:'Background',
                                          fromSpot: go.Spot.NotRightSide,
                                          curve: go.Link.JumpGap, 
                                          corner: 10},
      GJS(go.Shape, {fill: '#6f6f8d' , stroke: '#6f6f8d', strokeWidth: 2}),
      GJS(go.Shape, { toArrow: 'Triangle' , fill: '#6f6f8d' , stroke: '#6f6f8d'}),
      GJS(go.Panel, 'Auto', { width: 109, height: itemHeight, segmentIndex: 1, segmentFraction: 0.5,
        segmentOrientation: go.Link.OrientAlong ,segmentOffset: new go.Point(0, 20),
        },        
        GJS(go.Shape, 'RoundedRectangle', { fill: 'white', mouseHover:this.showDeleteButton}),
        GJS(go.TextBlock, new go.Binding('text'))
      ),
      GJS(go.Panel,'Vertical',
      GJS(go.Picture,{source:'assets/icons/node_icons/link_data/wait.svg',
                      segmentIndex: 2, 
                      segmentFraction: 0.5,
                      mouseHover:this.changeWaitIcon})),
    );
  }

The function showDeleteButton is creating an adornment of delete button on the Link Label

 showDeleteButton(e , obj){
    const label = obj.part
    theHoverLabelAdornment.adornedObject = label;
    label.addAdornment('mouseHover', theHoverLabelAdornment);
  }

the show delete button calls theHoverLabelAdornment variable which is a template for adornment.

theHoverLabelAdornment = GJS(go.Adornment, 'Spot',{
      background: 'transparent',
      layerName:'Background',
      // hide the Adornment when the mouse leaves it
      mouseLeave: function(e, obj) {
        var hideDeleteButton = obj.part.adornedPart;
        hideDeleteButton.removeAdornment('mouseHover');
      }
    },
    GJS(go.Placeholder ,{cursor:'pointer'}),
    GJS('Button', 
        { 
          alignment:new go.Spot(0,0,0,50),
          click : this.removeObjectButton,
          cursor:'pointer',
          'ButtonBorder.fill': 'transparent',
          'ButtonBorder.stroke': 'transparent',
          '_buttonFillOver': 'transparent',
          '_buttonStrokeOver': 'transparent',
        },
        GJS(go.Picture, {source : 'assets/icons/node_icons/others/delete_node.svg' , width : 35, height : 25})))

This what the current result of my code.

But the desired result should be

linklabel%20original


#7

Please format your code: Code Formatting

On the “Button”, set { alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom }.


#8

Hi @walter This does not solve my problem. It’s still the same. As It is still taking the Spot with respect to link and not to the Link Label. what I observed with the above edit is that it’s getting created in the top of the Link at its centre.


#9

No, the Picture is positioned by the Spot Panel relative to the label, not relative to the Link. You did say you wanted the Picture to be above the label, where “above” normally means at a smaller y-coordinate point.

Hmmmm, upon review, your code is misleading:

 const label = obj.part

The name “label” implies that the value would be the label, but obj.part is probably not the label but the whole link.

So why are you getting the Shape’s part instead of its panel? I would guess that the panel is the label you want to adorn.


#10

Okay, I was considering the Label as one of the Parts that’s the reason I was using obj.part method on the Hover of the Label . So what I should use panel or part?. The whole link should get deleted with its link labels but just the position of the delete Button which I have made as an adornment of link should be on the top of the label.


#11
showDeleteButton(e, obj){
  const label = obj.panel;  // obj is the RoundedRectangle shape, panel is the whole label
  theHoverLabelAdornment.adornedObject = label;
  label.part.addAdornment('mouseHover', theHoverLabelAdornment);
}

#12

@walter and @jhardy Thanks for the solution I missed to put

label.part.addAdornment('mouseHover',theHoverLabelAdornment);

Thank you!