Handle pagination for palette


I have a palette that looks like this

And I want to implement simple pagination mechanic, when user scrolls down till the bottom I would like to do fetch and merge new nodes into the model of palette.
What would the best way to make it?


The general answer is to implement a “ViewportBoundsChanged” DiagramEvent listener that notices when the user has scrolled “to the bottom” according to the Diagram.documentBounds compared with the Diagram.viewportBounds, and that there should be more nodes, and that you haven’t already made a request, and if so then requests more nodes from the server. When a successful response arrives, commit a transaction in which you add all of the new node data to the model.

implement a “ViewportBoundsChanged”

That what I wanted to hear, thanks a lot @walter!

Hi walter
It looks like if user scrolls diagram by dragging scrollbar, not by scrolling mouse wheel - ViewportBoundsChanged event doesn’t fire

Yes it does. Try moving the nodes around to increase the size of the documentBounds, and then scroll a scrollbar.

<!DOCTYPE html>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
      "ViewportBoundsChanged": e => console.log(e.diagram.viewportBounds.toString(), Date.now()),
      "animationManager.isInitial": false,
      "undoManager.isEnabled": true

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
      { fill: "white" },
      new go.Binding("fill", "color")),
      { margin: 8 },
      new go.Binding("text"))

myDiagram.model = new go.GraphLinksModel(
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }