Closed kapilkumawat86 closed 3 years ago
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
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
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);
};
Thanks this will work... and yes canvas is not full width.. then I need to take that in consideration
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?