Pan / move the canvas so that a specific node comes at a specific positon on the screen

[samvloeberghs]

Hi,

I have the following use case that does not seem to be supported or not well documented (yet).

1. I am rendering a list of connected nodes on the canvas, in a sort of decision flow.
2. On user action I would like to move/pan the canvas programmaticaly so that a specific node is put top left.

So for example, the position of that specific node might be x:500, y:500.
But I would like to have that visually moved to x:50, y:50; so that it's now viewed top left.

So it's closely related to centering a node, but instead of centering it, putting it top left :)

I hope it makes sense, not sure how to put it differently :D

I tried like this, but it doesn't seem to work ...

  private viewportService = inject(NgDiagramViewportService);
  private modelService = inject(NgDiagramModelService);

  selectAndScrollToTopLeft(nodeId: string, margin = 16): void {
    const node = this.modelService.nodes().find(n => n.id === nodeId);
    if (!node) return;

    // Place a zero-size rect at the node's position.
    // centerOnRect will pan the viewport so this point is centered —
    // using zero width/height means it converges on the exact top-left corner.
    this.viewportService.centerOnRect({
      x: node.position.x - margin,
      y: node.position.y - margin,
      width: 0,
      height: 0,
    });
  }

Thx!

[samvloeberghs]

Feels related to:
#591

[piotrblaszczyk]

Hi, thanks for the detailed description!

The centerOnRect approach won't work here because it always centers the rect in the viewport, and it requires width > 0 and height > 0 (passing 0 causes it to silently do nothing).

You can achieve this with moveViewport instead . It sets the viewport position directly:

private viewportService = inject(NgDiagramViewportService);
private modelService = inject(NgDiagramModelService);

selectAndScrollToTopLeft(nodeId: string, margin = 16): void {
  const node = this.modelService.nodes().find(n => n.id === nodeId);
  if (!node) return;

  const { scale } = this.viewportService.viewport();
  this.viewportService.moveViewport(
    margin - node.position.x * scale,
    margin - node.position.y * scale,
  );
}

moveViewport sets the viewport translation. To place a node at screen position (margin, margin), you offset the viewport by margin - nodePosition * scale.

[samvloeberghs]

This works, almost!
I just had to negative the x, y coordinates:

  const { scale } = this.viewportService.viewport();
  this.viewportService.moveViewport(
    -(margin - node.position.x * scale),
    -(margin - node.position.y * scale)
  );