Adornment get blur after adding node on it

Hi,

i have node ‘A’. One adornment is added to node ‘A’. When i drag node ‘B’ from pallete and drop it on node ‘A’, then adornment on node ‘A’ got blurred.

please find screenshot below:-
In below screenshot, cross symbol is my adornment.

So, when i dropped node ‘B’ on node ‘A’, my cross symbol got blurred.

Below is my code for node and Adornment:-

mainDiagram.nodeTemplateMap.add(key,
$go(go.Node, “Auto”, nodeStyle(),
{selectable:true
},
$go(go.Shape, “Rectangle”,nodeShapeStyle(),
{ fill: color,stroke:“White”,width:150,height:30}),{
click:showNodeSettings,
mouseHover: function(e, obj) {
var node = obj.part;
node.diagram.select(node);
nodeHoverAdornment.adornedObject = node;
node.addAdornment(“mouseHover”, nodeHoverAdornment);
}

        },
       $go(go.Panel, "Horizontal",{alignment:go.Spot.Left,margin:5},
				  $go(go.Picture,Image,
				  {
					  desiredSize: new go.Size(20, 20),
				  }),
					
		  $go(go.TextBlock,
			{ margin: 5, editable: true,stroke:"White",wrap:go.TextBlock.WrapFit,width:120,font:"12px sans-serif" },
			// user can edit node text by clicking on it
			new go.Binding("text", "text").makeTwoWay())
			
	   )
	   
	 )
    )

Adornment Code:-

nodeHoverAdornment =
$go(go.Adornment, “Spot”,
{
background: “transparent”,
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment(“mouseHover”);
ad.adornedPart.isSelected=false;
}
},
$go(go.Placeholder,
{
background: “transparent”
}),
$go(“Button”,
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight,background:“transparent” },
{ click: function(e, obj) { mainDiagram.commandHandler.deleteSelection();} },
$go(go.Picture,DeleteImageStaticResource,
{
desiredSize: new go.Size(10, 10)
}
)
)
);

Please help. Thanks in Advance.

I don’t see anything that would cause that behavior.

What do you do in a mouseDrop event handler or “ExternalObjectsDropped” DiagramEvent listener?

Nothing related to adornment.

How can the user reliably drop anything onto selected node A without your hover Adornment disappearing due to the mouseLeave event?

Sorry walter. I couldn’t able to understand your point. Can you please explain a bit more?
Thanks

The user hovers over node A. Your hover Adornment appears and the node is selected.

Then the user moves the mouse into the Palette so that they can drag-and-drop a new node into the main Diagram. Doing so should cause your mouseLeave event handler to remove the hover Adornment.

Yes you are right. When my mouse pointer mouse out of node A, then it removes the Adornment. But when i drop node B on node A, why my adornment got blurred/faint as shown above in the screenshot.

But drag-and-dropping a node from the Palette to the main Diagram should not cause a mouseHover event to happen. So that won’t show your hover Adornment nor will it select the stationary node.

That’s why I’m asking what you are doing when dragging or upon a drop.

ok. I am doing nothing while dragging a node. But while i am dropping a node on another node, i am doing following stuff:-

//if a node is dropped on another node, this function will get executed
function dropOntoNode(e, obj) {
if(dirtyFlagSave){
showSaveFlagPopup(e, obj,‘dropOnNode’);
}
else if(dirtyFlag){
showEditFlagPopup(e, obj,‘dropOnNode’);
}
else{
insertNode(e, obj);
/*if(e.diagram.selection.first().category != “End”)
dirtyFlagSave = true; */
}

}

function insertNode(e, obj){
      var diagram = e.diagram;
      var oldnode = obj.part;
      var newnode = diagram.selection.first();
    
      //if node is not drgged from step panel, a node is dragged from diagram and dropped on another node in diagram
      if((newnode.findLinksOutOf().count>0 || newnode.findLinksInto().count>0)&& newnode.category!=="MergeNode")
      {
      	diagram.currentTool.doCancel();
        return;
      }
    
      if (!(newnode instanceof go.Node)) return;
    
      if ((oldnode.category==="MergeNode" && newnode.category==="MergeNode" && newnode.findLinksOutOf().count>0) ||((newnode.category==="Review" || newnode.category==="Approval" )&& oldnode.category==="Start") ) {
        diagram.currentTool.doCancel();
        return;
      }
      
      if(newnode.category==="MergeNode" && oldnode.category!=="MergeNode")//if merge node is dropped on FV,DD,Ques,Approval or review, then do nothing 
	  {
	  	diagram.currentTool.doCancel();
        return;
	  }
	  if(newnode.category==="End" && oldnode.category==="Start")
	  {
	  	diagram.currentTool.doCancel();
        return;
	  }
      nodeHoverAdornment.adornedObject = newnode;
      newnode.addAdornment("mouseHover", nodeHoverAdornment);
    
      var tool = diagram.toolManager.linkingTool;
      
      //when a merge node is dropped on another merge node
      if(oldnode.category==="MergeNode" && newnode.category==="MergeNode" && newnode.findLinksOutOf().count===0)
	  {
		       		var linksIn = new go.Set(go.Link);
			        linksIn.addAll(newnode.findLinksInto());
			        var it = linksIn.iterator;
			        var fromnode;
			        var fromport;
			        while (it.next()) {
			          var link = it.value;
			          fromnode = link.fromNode;
			          fromport = link.fromPort;
			          diagram.remove(link);
			          diagram.remove(newnode);
			          break;
			        }
			
			     tool.insertLink(fromnode,fromport,oldnode,oldnode.port);
			     if(oldnode.findLinksOutOf().count===0)
			     {
				     var mergeNode=addMergeNode(diagram);
					 tool.insertLink(oldnode, oldnode.port, mergeNode, mergeNode.port);
			     }
	  }
       
       //It is used for branching
       if(oldnode.category==="Questionnaire" || oldnode.category==="Start" || oldnode.category==="Review"|| oldnode.category==="First_View_Screening" || oldnode.category==="Due_Diligence" || oldnode.category==="Approval")
       {
       		var linksOut = new go.Set(go.Link);
	        linksOut.addAll(oldnode.findLinksOutOf());
	        var it = linksOut.iterator;
	        while(it.next())
	        {
	        	var link = it.value;
		        tonode = link.toNode;
		       
		        if(tonode.category==="MergeNode" && tonode.findLinksOutOf().count===0)
		        {
		        	diagram.remove(link);
		        	diagram.remove(tonode);
		        }
	        }
       	    tool.insertLink(oldnode,oldnode.port,newnode,newnode.port);
       	    var mergeNode=addMergeNode(diagram);
			tool.insertLink(newnode, newnode.port, mergeNode, mergeNode.port);
			  
       }
       
       if(newnode.category==="End" && oldnode.category==="MergeNode" && oldnode.findLinksOutOf().count===0)
       {
       		insertEnd(newnode,oldnode,diagram,tool);
       		hidePaletteRightForOthers();
       }
       diagramCopy.contentAlignment=go.Spot.Top;
       if(!dirtyFlag && !dirtyFlagSave){	
	  	    rightSidebar = true;
		    hidePaletteRight();
    	}
  	  //diagramCopy.requestUpdate(); 
  	  if(e.diagram.selection.first().category != "End")  
			dirtyFlagSave = true; 
}

I think it is happening because of some properties in adornment(cross symbol). And note that, after dropping node B on node A, adornment(cross symbol) on node A is not removed, it just got blurred like some layer got top onto it.
This is my observation. Can you please help?

Thanks

First, a terminology clarification – from your screenshot the “X” button in your Adornment is not getting blurred. It does appear to be partly translucent.

Do you have any code dealing with the GraphObject.opacity property or the Layer.opacity property?

Yes, i am using this code:-
mainDiagram.findLayer(“Tool”).opacity = 0.3;

That explains it then.

Or maybe it doesn’t – it isn’t clear to me why your hover Adornment is in the “Tool” layer rather than in the “Adornment” layer.

I think you are right. I also don’t know why my adornment is in tool layer. Can you please tell me how to add my adornment in ‘Adornment’ layer rather than ‘Tool’ layer.
Thanks

Set layerName: "Adornment"

Sorry walter. Still it is not working. I don’t why my ‘Tool’ layer is coming over Adornment.

Try setting adornment.layerName = "Adornment" after calling diagram.addAdornment.

Thanks Walter. It worked. :)