Handle pagination for palette

GoJS
1

Hi!

I have a palette that looks like this

image
image527×565 23.9 KB

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?

Thanks
Vlad

2

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.

3

implement a “ViewportBoundsChanged”

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

4

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

5

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

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <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",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { 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" }
]);
  </script>
</body>
</html>