Hello after updating from 2.1.* to 2.3.1, experiencing such effect
Thanks for reporting this – we’ll investigate.
[EDIT] Hmmm, I cannot reproduce this problem. Could you please tell me how you have defined your grid and any “ViewportBoundsChanged” listener?
Here’s my code:
myDiagram =
new go.Diagram("myDiagramDiv",
{
// this creates a bunch of dots at the default gridCellSize of 10x10
grid: $(go.Panel, "Grid",
$(go.Shape, "LineH", { strokeWidth: 0.5, strokeDashArray: [0.5, 9.5] })
),
"ViewportBoundsChanged": e => {
if (e.diagram.scale !== e.subject.scale) {
const gridline = e.diagram.grid.elt(0);
gridline.strokeWidth = Math.max(0.5, 0.5/e.diagram.scale);
gridline.strokeDashArray = [gridline.strokeWidth, 10-gridline.strokeWidth];
}
},
"undoManager.isEnabled": true
});
I tried with various settings for Diagram.scrollMode, Diagram.scrollMargin, Diagram.padding. And with or without any Parts at all in the Diagram. They all seemed to work well.
Here’s the sample that this code was taken from: Background Image with Grid of Dots
Although you may have no need for the background image part.
diagram.toolManager.draggingTool.isGridSnapEnabled = true;
diagram.toolManager.resizingTool.isGridSnapEnabled = true;
diagram.toolManager.hoverDelay = 500;
diagram.toolManager.draggingTool.gridSnapCellSize = new go.Size(16, 16);
const gridCell = 16;
// set up a dot pattern
const pattern = document.createElement('canvas');
pattern.width = gridCell;
pattern.height = gridCell;
const context = pattern.getContext('2d');
context.lineCap = 'round';
context.lineJoin = 'round';
context.fillStyle = '#dddddd';
context.ellipse(1, 1, 1, 1, 0, 0, 6.29);
context.fill();
const patternBrush = goMake(go.Brush, goObjectTypes.Pattern, {pattern: pattern});
diagram.grid = goMake(
go.Panel,
go.Panel.Grid,
{
gridCellSize: new go.Size(gridCell, gridCell),
},
goMake(go.Shape, goObjectTypes.LineH, {
stroke: patternBrush,
strokeWidth: 8,
interval: 1,
})
);
There is no special ViewportBoundsChanged handler set for that diagram
Thanks for the code – that is different from what I expected, as you have seen in the code that I gave you. If you try drawing the grid my way, do you encounter the problem?
Using your code, I am unable to reproduce the problem, in either Firefox or Chrome:
const $ = go.GraphObject.make;
const gridCell = 16;
// set up a dot pattern
const pattern = document.createElement('canvas');
pattern.width = gridCell;
pattern.height = gridCell;
const context = pattern.getContext('2d');
context.lineCap = 'round';
context.lineJoin = 'round';
context.fillStyle = 'black'; //'#dddddd';
context.ellipse(1, 1, 1, 1, 0, 0, 6.29);
context.fill();
const patternBrush = $(go.Brush, "Pattern", {pattern: pattern});
const myDiagram =
$(go.Diagram, "myDiagramDiv",
{
grid:
$(go.Panel, "Grid",
{ gridCellSize: new go.Size(gridCell, gridCell) },
$(go.Shape, "LineH",
{ stroke: patternBrush, strokeWidth: 8 })
),
. . .
})
I did draw “black” to make the dots more obvious. Shape.interval defaults to 1.
I tried both panning and scrolling at various diagram scales both less than and greater than 1 (as well as at 1, of course).
When the user increases the size of the Div, there is a brief time when the new area of the Div is empty. But that gets filled in promptly.
So how can we reproduce the problem?
Actually I didnt invented this code, I’ve got it from gojs support :) Anyway, I think I will try to use the code you suggested in the first post and I’ll update you if the issue still exists.
Thanks!
Vlad
I tried your code for grid, I’ve also added your code to ViewportBoundsChanged. Still having the same issue that grid pattern does not redraw correctly on dragging diagram canvas.
If you say it works on new empty diagram, so it is highly likely something wrong with my diagram config.
Reminding you that this thing happens only on 2.3.1, I’ve tested my diagram on 2.2 - it works as expected. And all code for this diagram was written with 2.1.46 version on board
Please, suggest what you are missing from diagram config to continue investigate - I’ll share that code so we will be able to locate a root cause of the issue
Thanks
Vlad.
Since the GoJS library has no dependencies, configuration problems are limited to making sure you really are loading only the version of the library that you want, and that you only do so once. So you might want to check the “Network” tab of the debugger to see which files have been loaded, perhaps cached.
I doubt that this issue somehow related to cache or something else. When I explicitly install specific version of gojs 3.2.1 grid pattern stops working correctly. when I downgrade to any other version - issue dont exist. So lets focus on diagram config rather then trying all other possibilities
Sorry, I thought that was what you mean by “configuration”.
I didn’t bother including any node template or the model initialization, but those don’t matter, do they?
I hadn’t tried it with no nodes or links at all (empty model), but now I have, and everything’s still good.
[EDIT] You haven’t set Diagram.renderer, have you? Not likely since you are upgrading from an earlier minor release. But “svg” rendering of grids when zoomed out has the kind of bug that you report.
Nope, there is no Diagram.renderer defined for diagram I’m experience current issue.
So I still cannot fathom the reason for the behavior that you see.
How do you initialize your Diagram? Don’t bother including any templates or model building code or custom tools, other than of the ToolManager or PanningTool, if there is any such customization at all.
const diagram = $(go.Diagram, 'model-designer-canvas', {
'undoManager.isEnabled': true,
'animationManager.isEnabled': false,
layout: $(go.LayeredDigraphLayout, {
direction: 90,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
isInitial: false,
isOngoing: false,
layerSpacing: 50,
columnSpacing: 50,
setsPortSpots: false,
}),
linkReshapingTool: $(SnapLinkReshapingTool),
model: $(go.GraphLinksModel, {
linkKeyProperty: 'key',
copiesKey: false,
}),
validCycle: go.Diagram.CycleNotDirected,
'draggingTool.computeEffectiveCollection': function (
parts,
options
): go.Map<go.Part, go.DraggingInfo> {
const all = new go.List();
parts.each((p) => {
all.add(p);
if (p.containingGroup !== null && !(p instanceof go.Link)) {
all.add(p.containingGroup);
} else if (p.data.hasComment) {
const relatedComment = modelDesignerHelper.findRelatedComment(p);
const diagram = p.diagram;
diagram.commit(() => {
relatedComment.movable = true;
}, goTransactions.updateRelatedCommentLocation);
all.add(relatedComment);
}
});
return go.DraggingTool.prototype.computeEffectiveCollection.call(this, all, options);
},
'draggingTool.isCopyEnabled': false,
});
diagram.toolManager.draggingTool.isGridSnapEnabled = true;
diagram.toolManager.resizingTool.isGridSnapEnabled = true;
diagram.toolManager.hoverDelay = 500;
diagram.toolManager.draggingTool.gridSnapCellSize = new go.Size(16, 16);
const gridCell = 16;
// set up a dot pattern
const pattern = document.createElement('canvas');
pattern.width = gridCell;
pattern.height = gridCell;
const context = pattern.getContext('2d');
context.lineCap = 'round';
context.lineJoin = 'round';
context.fillStyle = '#dddddd';
context.ellipse(1, 1, 1, 1, 0, 0, 6.29);
context.fill();
const patternBrush = $(go.Brush, goObjectTypes.Pattern, {pattern: pattern});
diagram.grid = $(
go.Panel,
go.Panel.Grid,
{
gridCellSize: new go.Size(gridCell, gridCell),
},
$(go.Shape, goObjectTypes.LineH, {
stroke: patternBrush,
strokeWidth: 8,
interval: 1,
})
);
diagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelOnPathDraggingTool());
diagram.toolManager.dragSelectingTool.box = $(
go.Part,
{layerName: 'Tool'},
$(go.Shape, goObjectTypes.Rectangle, {
name: 'SHAPE',
fill: null,
stroke: 'dodgerblue',
strokeWidth: 1,
})
);
diagram.toolManager.linkingTool.temporaryFromPort.strokeWidth = 0;
diagram.toolManager.linkingTool.temporaryToPort.strokeWidth = 0;
Well, that looks OK to me, and I don’t see any obvious clue as to what might be causing the bug.
Hmmm, is there any chance that some CSS is accidentally modifying the Canvas before our code happens to fix the damage? Not likely…
There is no any special CSS code that can accidentally modify any parts of diagrams.
Once again, I want to notice that the issue happens only after GoJS version from 2.2 to 2.3.1 (originally diagram developed under 2.1.46, I’ve tested it in different versions and in all other versions including 2.2 everything is fine)
So maybe we should focus on some parts of diagram that was changed from 2.2. of 2.3.1 version?
It would be very nice to understand those changes at least in some level, because another option is to go over each and every prop of diagram configuration and disable it and see if it something that affects grid or not. And I would like to avoid doing that unless we have no other options :)
Do you see that behavior when using Firefox?
Do you see that behavior when there is no debugger window open?
wooooooow first of all thats something new for me. never saw such issues.
Secondary, in FF it works fine both with or without DevTools opened.
Although in Chrome it does not work correctly only with DevTools opened, so once it is turned off - it works smooth as expected.
What should I do about it next? I cant tell customers “If you want diagram work smooth - dont open DevTools” :)
I will probably file a bug with the Chrome/Blink team. We’ll also be tracking down why this might be different from the 2.2 behavior, though the change may be correct or important and its purely a Chrome bug. But maybe not, and there’s something we can do.
Ok got it, I’ll be waiting for an update from you guys. Thanks a lot!
How often do your customers use Chrome and open the debugger?
For that fraction, how many will notice that bug?
I think you shouldn’t worry about it.
Or tell those customers to switch to Firefox :-)
I have found the change that surfaced this Chrome issue, and the next version will work like it used to. Though it’s not yet clear to me why Chrome is causing this issue with some superfluous code in this instance.