Hi, Go.js Team!
I’ve found this weird issue.
When I tried to create a link from ‘Generic’ to ‘Search’, clone of highlight box is created and it never disappears unless I refresh browser.
I can send node template code if you want to see.
Regards.
Are you using the debug library, go-debug.js and making sure there aren’t any warnings or error messages in the console window?
Hmmm. I do recommend fixing those warnings, but I’m not sure that would explain the problem that you are showing.
Do you have some customized tools? I suspect that the error is in those overridden methods. It’s hard to guess, though.
Hi ,Walter! I’ve sent builder code part to your email address. Can you please check?
That’s a lot of code. I don’t see anything obviously wrong, but you might want to check to make sure the calls to addAdornment and removeAdornment really do match up.
mouseEnter: function(e, obj, prev) {
if(readOnly) return;
linkSettingMenu.show();
linkSettingMenu.css({left: e.viewPoint.x});
linkSettingMenu.css({top: e.viewPoint.y});
linkSettingMenu.find('.link-color').spectrum('set', obj.data['arrowColor']);
obj.path.stroke = "rgba(30,144,255,0.2)";
selectedLink = obj.part;
var tool = e.diagram.toolManager.linkReshapingTool;
var ad = obj.findAdornment(tool.name);
if (!ad) ad = tool.makeAdornment(obj.path);
obj.addAdornment(tool.name, ad);
editingLink = obj;
},
mouseLeave: function(e, link, next) {
if(readOnly) return;
link.path.stroke = "transparent";
var tool = e.diagram.toolManager.linkReshapingTool;
if (next && next.part.category === tool.name) return;
link.removeAdornment(tool.name);
e.diagram.remove(deletePointButton);
},
Is there any wrong with addAdornment & removeAdornment?
This is for link template.
That adornment is the thing you see left behind, isn’t it? If not, figure out what it is. Have you debugged that code to make sure it gets added and removed properly?
Yeah, that part is referenced by you.
And when I tried to add/remove control points to link, there was no error in console.
Wait – are you saying that the error happens when you are adding points to the link’s route, or removing a point from the route? That seems completely different from what you were complaining about at the beginning of this topic.
Why are you trying to specify the route at all when the user is trying to draw a new link?
Could you please describe precisely what the problem is in a manner that I can understand it and so that I can reproduce it?
No, I just mentioned control points because you suggested to check addAdornment and removeAdorment .
As I recorded in loom video: https://www.loom.com/share/dfd1a8fe65ef4d0c82c88253ee65a998
The error happens when:
First, I tried to start link from ‘Search’ but just stopped without linking to another.
Second, I did same thing as above for “Generic”, then ‘Search’ got duplicated highlight box.
Same error happens when I tried vice versa - first ‘Generic’, second ‘Search’.
You can see from above video.
And is that “highlight box” one of your Adornments?
If it is, then is the only place where that Adornment is created and added and removed the code that you quoted – the mouseEnter and mouseLeave event handlers?
If so, you need to debug exactly when those Part.addAdornment and Part.removeAdornment calls are being made, to make sure the removeAdornment is called at all of the times that are needed.
Yes, that highlight box is a selected adornment as I wrote here for node templates code:
selectionAdornmentTemplate:
$$(go.Adornment, "Auto",
{ layerName: "Background" },
$$(go.Shape, "RoundedRectangle",
{ fill: null, stroke: "rgb(204, 0, 0)", strokeWidth: 2, strokeDashArray: [12, 8], fill: "rgba(255,255,255,0.7)"}),
$$(go.Placeholder)
), // end Adornment
Addornment add/remove on mouseEnter/mouseLeave on link template definition are only for adding/removing control points.
funnelDiagram = $$(go.Diagram, "edit-div",
{
// have mouse wheel events zoom in and out
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
"toolManager.hoverDelay": 100,
"toolManager.holdDelay": 300,
"undoManager.isEnabled": true, // enable undo & redo
initialContentAlignment: go.Spot.TopLeft,
hasHorizontalScrollbar: false,
hasVerticalScrollbar: false,
minScale: 0.25, // so that the contents cannot appear too small
maxScale: 3, // so that the contents cannot appear too big
initialScale: 0.7,
padding: new go.Margin(40, 0, 0, 170),
layout: $$(go.CircularLayout, { isOngoing: false, isInitial: false, isViewportSized: false }),
commandHandler: $$(DrawCommandHandler),
'commandHandler.pasteOffset': new go.Point(20,20),
"linkReshapingTool.handleArchetype":
$$(go.Shape, "Circle",
{ // change the default reshape handle to be a large circle
width: 16, height: 16,
fill: "lightblue", stroke: "dodgerblue",
mouseEnter: function(e, shape) { // show the delete button
deletePointButton.adornedObject = shape;
e.diagram.add(deletePointButton);
},
mouseLeave: function(e, shape, next) { // show the delete button
var tool = e.diagram.toolManager.linkReshapingTool;
if(tool.adornedLink)tool.adornedLink.removeAdornment(tool.name);
},
}),
And I have one more removeAdorment part in diagram definition like above. But I think that’s for only link.
So no Part.addAdorment or Part.removeAdornment I used in script.
I was referring to these calls:
So you are now saying that the Adornment being added or removed by this code is not the one that remains visible in your video, when it should not have remained visible? OK, so who is creating that object? Where is it defined?
Yeah, Those parts were inside of link template definition:
funnelDiagram.linkTemplate = $$(go.Link,
{
toShortLength: 4, fromShortLength: 15,
fromEndSegmentLength: 60,
fromSpot: go.Spot.None,
toSpot: go.Spot.None,
layerName: "Background",
zOrder: 2,
cursor: "pointer",
reshapable: true,
adjusting: go.Link.Stretch,
selectionAdornmentTemplate:
$$(go.Adornment,
$$(go.Shape,
{ isPanelMain: true, stroke: "rgba(30,144,255,0.2)", strokeWidth: 20 }),
$$(go.Shape,
{ isPanelMain: true, stroke: "#787878", strokeWidth: 2 }),
$$(go.Shape,
{ toArrow: "Standard", fill: "#787878", stroke: null, scale: 1.5,segmentOffset: new go.Point(10,0) })
), // end Adornment
mouseEnter: function(e, obj, prev) {
if(readOnly) return;
linkSettingMenu.show();
linkSettingMenu.css({left: e.viewPoint.x});
linkSettingMenu.css({top: e.viewPoint.y});
linkSettingMenu.find('.link-color').spectrum('set', obj.data['arrowColor']);
obj.path.stroke = "rgba(30,144,255,0.2)";
selectedLink = obj.part;
var tool = e.diagram.toolManager.linkReshapingTool;
var ad = obj.findAdornment(tool.name);
if (!ad) ad = tool.makeAdornment(obj.path);
obj.addAdornment(tool.name, ad);
editingLink = obj;
},
mouseLeave: function(e, link, next) {
if(readOnly) return;
link.path.stroke = "transparent";
var tool = e.diagram.toolManager.linkReshapingTool;
if (next && next.part.category === tool.name) return;
link.removeAdornment(tool.name);
e.diagram.remove(deletePointButton);
},
click: function(e, link) {
if(readOnly) return;
var p = e.diagram.lastInput.documentPoint;
var seg = link.findClosestSegment(p);
var pts = link.points.copy();
pts.insertAt(seg+1, p.copy());
funnelDiagram.startTransaction("inserted point in link route");
link.points = pts;
funnelDiagram.commitTransaction("inserted point in link route");
}
},
new go.Binding("points", "points").makeTwoWay(),
So it has nothing with Nodes.
I already sent you node templates source code with builder.js in email.
They’re in "card-templates’ folder.
FYI, node template code for ‘Search’ is ‘traffic-card.js’ & ‘Generic’ is “page-card.js”.
OK, that helps a bit.
I suspect that putting Adornments in the “Background” Layer (or any other regular Layer) is a bad idea. You don’t want to put Adornments or other Parts that are supposed to be ignored by the UndoManager and the Model into a Layer that holds “real” modeled objects. I suppose you could add a new Layer that has the z-ordering that you want, but that has Layer.isTemporary set to true.
I suggest that you put the code for Adornments, including any toolTip or contextMenu, in separate variables and then refer to them in the template. That way the template can be shorter, so you are more likely to fit the template into one page, so that that code can be more understandable.