Fit to Screen Tool

Introduction

This action automatically adjusts the zoom and position of the Stage to ensure all visible nodes fit neatly within the viewport. It’s perfect for resetting the view, getting a quick overview of the entire workspace, or re-centering after navigation.

Dependencies

This action needs also registered on the Weave instance the following:

Stage zoom plugin

Usage

Import the Action

Start by importing the action:

import { WeaveFitToScreenToolAction } from "@inditextech/weave-sdk";

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeaveFitToScreenToolAction(), (1)
  ]
})

1	Added in this step.

Setup the action trigger

Setup on a button or any element on the UI the user can interact with on the action event:

instance.triggerAction("fitToScreenTool");

For example on a button on React:

import React from "react";
import { useWeave } from "@inditextech/weave-react";

const MyFitToScreenToolTriggerComponent = () => {
  const instance = useWeave((state) => state.instance);

  const triggerTool = React.useCallback(() => {
    instance.triggerAction("fitToScreenTool");
  }, [instance]);

  return <button onClick={triggerTool}>Fit to Screen Tool</button>;
};

Trigger the action

Finally a final user trigger the UI element that launches the action.

When triggered finds the zoom level necessary to fit all the selected nodes in the viewport and center on them, so they can be entirely visible.