How can we do something like bring node in Canvas View? similar to scrollIntoView/scrollIntoViewIfNeeded

[kapilkumawat86]

We have requirement where we need to highlight and bring node in view if its not in view port of Canvas... Do we have a way to do this?

[stanislav-grin]

Here is an example in demo project:

http://projectstorm.cloud/react-diagrams/?path=/story/simple-usage--zoom-to-fit-nodes

What you need is to call engine.zoomToFit()

Sources from demo: https://github.com/projectstorm/react-diagrams/blob/master/packages/diagrams-demo-gallery/demos/demo-zoom-to-fit/index.tsx

[kapilkumawat86]

No this will reduce the zoom level, that not the requirement... I want to change the offset of engine so that Node will be visible to the end user

[renato-bohler]

You can get the current node position by calling node.getPosition(), and you can set the canvas position by calling model.setOffset(x, y).

Now, you only need to add some maths. Something like:

const highlightNode = (model, node) => {
  // If your canvas is not fullscreen, you'll need to change these:
  const CANVAS_WIDTH = window.innerWidth;
  const CANVAS_HEIGHT = window.innerHeight;

  const nodePosition = node.getPosition();

  const newOffsetX = (CANVAS_WIDTH - node.width) / 2 - nodePosition.x;
  const newOffsetY = (CANVAS_HEIGHT - node.height) / 2 - nodePosition.y;

  model.setOffset(newOffsetX, newOffsetY);
};

[kapilkumawat86]

Thanks this will work... and yes canvas is not full width.. then I need to take that in consideration