Using Shape type Circle for Diagram.grid doesn't work

GoJS
1

Hi!

I’m trying to set diagram.grid pattern with circles. Something like this
image

I’ve added this code

		diagram.grid = $(
			go.Panel,
			go.Panel.Grid,
			{
				name: 'GRID',
				visible: true,
				gridCellSize: new go.Size(8, 8),
				gridOrigin: new go.Point(0, 0),
			},
			$(
				go.Shape,
				"Circle",
				{
					name: 'horizontal',
					stroke: "red",
					fill: 'red',
					width: 2,
					height: 2,
				}
			),
			$(
				go.Shape,
				"Circle",
				{
					name: 'vertical',
					stroke: "red",
					fill: 'red',
					width: 2,
					height: 2,
				}
			),
		)

Somehow that doesnt work at all, but if I flip Shape type ot LineV/LineH it works.
Am I doing something wrong?

Thanks
Vlad.

2

Yes, as documented in GoJS Grid Patterns -- Northwoods Software there are only four different kinds of figures that are supported. “Circle” is not one of them.

I was going to suggest using zero-length dashes and setting the Shape.strokeDashCap property to “round” – but the property doesn’t exist. Not in GoJS, not in HTML Canvas, not in SVG.

I have tried a couple other possibilities, but they don’t work either. We’ll investigate. I don’t know when a solution might become available.

3

Yes unfortunately we do not support arbitrary shapes in the Grid, mostly for performance reasons.

It is possible to do:

$(go.Panel, "Grid",
  { gridCellSize: new go.Size(10, 10) },
  $(go.Shape, "LineH", { strokeDashArray: [1, 9] })
),

or

$(go.Shape, "LineH", { strokeDashArray: [0.5, 9.5], strokeWidth: 0.5 })

But not a true circular shape.

4

Here’s a possible work-around using a single Shape in a Part in the “Grid” Layer:

const GridOrigin = new go.Point(-1, 0);
const GridCellSize = new go.Size(10, 10);

function makeGridGeo() {
  const geo = new go.Geometry();
  const fig = new go.PathFigure(0, 0);
  for (let i = 0; i < 200; i++) {
    fig.add(new go.PathSegment(go.PathSegment.Move, 0, i*GridCellSize.height));
    fig.add(new go.PathSegment(go.PathSegment.Line, 3000, i*GridCellSize.height));
  }
  return geo.add(fig);
}
const GridP =
  $(go.Part,
    { layerName: "Grid", position: GridOrigin },
    $(go.Shape,
      {
        geometry: makeGridGeo(),
        strokeWidth: 0,
        pathPattern: $(go.Shape, "Circle", { width: GridCellSize.width, height: 2, fill: "lightgray", strokeWidth: 0 })
      })
  );
myDiagram.add(GridP);
const GridImage = myDiagram.makeImage({ scale: 1 });
myDiagram.remove(GridP);

const Grid =
  $(go.Part,
    { layerName: "Grid", position: GridOrigin },
    $(go.Picture, { element: GridImage })
  );
myDiagram.add(GridP);
myDiagram.addDiagramListener("ViewportBoundsChanged", e => {
  const p = e.diagram.viewportBounds.position;
  p.snapToGridPoint(GridOrigin, GridCellSize);
  GridP.position = p;
});
5

Actually, you can use a go.Brush with a pattern for the stroke to perform this reasonably well: https://codepen.io/simonsarris/pen/OJzdKwK?editors=1010

Although we cannot guarantee good performance on very large graphs or graphs with Overviews.

6

Wow, thats a lot guys for support!

I think I will go with go.Brush approach. Thanks!