Virtualization when over a Map

GoJS
21

I don’t know why you would have bindings for both location and position. The properties are the same if you haven’t set Part.locationSpot or Part.locationObjectName.

If you want data.latlong to take precedence, don’t you want to return the point that is at the top-left corner of the bounds of all of the points of the Array? You are doing that in your binding for position.

22

Ok…so…

…I’m clearly not getting the big picture. I’ve simplified the node template to the essentials. I’ve included the calculation of building geometry. I’ve also included the onViewportChanged logic.

Keep in mind my goal is to virtualize the geometry in these “lines” nodes since I expect in the neighborhood of 50,000 lines. I can’t get anything intelligible to print on the canvas. I have checked that the template is being used by the diagram.

Can you please take a look and let me know what I can be doing better?

buildLinesNodeTemplate() {

let theLinesNodeTemplate =
  $(go.Part, 'Vertical',
    new go.Binding('position', 'bounds', function (b) {
      return b.position;
    })
      .makeTwoWay(function (p, d) {
        return new go.Rect(p.x, p.y, d.bounds.width, d.bounds.height);
      }),
    {
      layerName: 'facilities',
      locationSpot: go.Spot.Center
    },

    // this is the lines shape

    $(go.Shape,
      new go.Binding('geometry', '', (d) => this.buildLineGeometry(d)),
      {
        isGeometryPositioned: true,
        strokeWidth: 3,
        isPanelMain: true,
        cursor: 'pointer',
        name: 'shapeMarker',
        height: 11,
        margin: 5,
        stroke: 'red'
      }),
  );

this.diagram.nodeTemplateMap.add('facility-line', theLinesNodeTemplate);

}

buildLineGeometry(d: IGoJsDiagramLineData): go.Geometry {

let latlongs = d.points;

if (!latlongs) return new go.Geometry();

let point = this.map.latLngToContainerPoint(latlongs[0] as L.LatLngExpression);
let fig = new go.PathFigure(point.x, point.y); //the start of the path, x and y

for (let i = 1; i < latlongs.length - 1; i ++) {
  let p = this.map.latLngToContainerPoint(latlongs[i] as L.LatLngExpression);

  fig.add(new go.PathSegment(go.PathSegment.Line, p.x, p.y));
}

return new go.Geometry().add(fig);

}

onViewportChanged() {
//let diagram = e.diagram;
// make sure there are Nodes for each node data that is in the viewport
// or that is connected to such a Node
let viewb = this.diagram.viewportBounds; // the new viewportBounds
let model = this.diagram.model;

let oldskips = this.diagram.skipsUndoManager;
this.diagram.skipsUndoManager = true;

let b = new go.Rect();
let ndata = this.theEntireModel.nodeDataArray;
for (let i = 0; i < ndata.length; i++) {
  let n = ndata[i];
  if (!n['bounds']) {
    continue;
  }
  if (n['bounds'].intersectsRect(viewb)) {

    this.addNodeAndGroups(this.diagram, this.theEntireModel, n);
  }
}

}

and finally, the node data itself:

let theLineData = {
id: dataRow.id,
key: layerKey + ‘-’ + dataRow.id,
bounds: new go.Rect(20, 20, 30, 30),
lineLabel: graphicsSettings.labelTextGenerator.generatorFunction(dataRow),
facilityTypeLabel: label,
nodeCategory: ‘facility-line’,
highlighted: false,
visible: true,
points: innerNodePoints,
};

23

I’m not feeling up to doing any serious work, and you don’t have a support subscription anyway, so I’m not going to implement something for you.

I suggest that you play with creating a Part and calling Diagram.add to see if it shows in the diagram’s viewport at all.